@l4yercak3/cli 1.2.16 → 1.2.19

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

@@ -0,0 +1,1699 @@
+/**
+ * Component Generator
+ * Generates React components for L4YERCAK3 features
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { ensureDir, writeFileWithBackup, checkFileOverwrite } = require('../../../utils/file-utils');
+
+class ComponentGenerator {
+  /**
+   * Generate React 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
+    let outputDir;
+    if (fs.existsSync(path.join(projectPath, 'src'))) {
+      outputDir = path.join(projectPath, 'src', '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);
+      results.contactForm = await this.generateContactForm(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 Forms components
+    if (features.includes('forms')) {
+      results.dynamicForm = await this.generateDynamicForm(outputDir, ext, isTypeScript);
+    }
+
+    // Generate Products components
+    if (features.includes('products') || features.includes('checkout')) {
+      results.productCard = await this.generateProductCard(outputDir, ext, isTypeScript);
+      results.productGrid = await this.generateProductGrid(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
+ * Displays a searchable, filterable list of contacts
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+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;
+  className?: string;
+}
+
+export function ContactList({ onSelect, className = '' }: ContactListProps) {
+  const [search, setSearch] = useState('');
+  const [tagFilter, setTagFilter] = useState<string | null>(null);
+
+  const { data: contacts, isLoading, error } = useContacts({
+    search: search || undefined,
+    tags: tagFilter ? [tagFilter] : undefined,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 bg-red-50 text-red-600 rounded-lg">
+        Failed to load contacts: {error.message}
+      </div>
+    );
+  }
+
+  return (
+    <div className={\`space-y-4 \${className}\`}>
+      {/* Search and Filter */}
+      <div className="flex gap-4">
+        <input
+          type="text"
+          placeholder="Search contacts..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <select
+          value={tagFilter || ''}
+          onChange={(e) => setTagFilter(e.target.value || null)}
+          className="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          <option value="">All Tags</option>
+          <option value="customer">Customer</option>
+          <option value="lead">Lead</option>
+          <option value="partner">Partner</option>
+        </select>
+      </div>
+
+      {/* Contact Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {contacts?.map((contact) => (
+          <ContactCard
+            key={contact.id}
+            contact={contact}
+            onClick={() => onSelect?.(contact)}
+          />
+        ))}
+      </div>
+
+      {contacts?.length === 0 && (
+        <div className="text-center py-8 text-gray-500">
+          No contacts found
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+  }
+
+  getContactListJS() {
+    return `/**
+ * ContactList Component
+ * Displays a searchable, filterable list of contacts
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useContacts } from '@/lib/l4yercak3/hooks/use-contacts';
+import { ContactCard } from './ContactCard';
+
+export function ContactList({ onSelect, className = '' }) {
+  const [search, setSearch] = useState('');
+  const [tagFilter, setTagFilter] = useState(null);
+
+  const { data: contacts, isLoading, error } = useContacts({
+    search: search || undefined,
+    tags: tagFilter ? [tagFilter] : undefined,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 bg-red-50 text-red-600 rounded-lg">
+        Failed to load contacts: {error.message}
+      </div>
+    );
+  }
+
+  return (
+    <div className={\`space-y-4 \${className}\`}>
+      {/* Search and Filter */}
+      <div className="flex gap-4">
+        <input
+          type="text"
+          placeholder="Search contacts..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <select
+          value={tagFilter || ''}
+          onChange={(e) => setTagFilter(e.target.value || null)}
+          className="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          <option value="">All Tags</option>
+          <option value="customer">Customer</option>
+          <option value="lead">Lead</option>
+          <option value="partner">Partner</option>
+        </select>
+      </div>
+
+      {/* Contact Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {contacts?.map((contact) => (
+          <ContactCard
+            key={contact.id}
+            contact={contact}
+            onClick={() => onSelect?.(contact)}
+          />
+        ))}
+      </div>
+
+      {contacts?.length === 0 && (
+        <div className="text-center py-8 text-gray-500">
+          No contacts found
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+  }
+
+  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
+ * Displays a single contact in a card format
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import type { Contact } from '@/lib/l4yercak3/types';
+
+interface ContactCardProps {
+  contact: Contact;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function ContactCard({ contact, onClick, className = '' }: ContactCardProps) {
+  const initials = \`\${contact.firstName?.[0] || ''}\${contact.lastName?.[0] || ''}\`.toUpperCase();
+
+  return (
+    <div
+      onClick={onClick}
+      className={\`p-4 bg-white border rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer \${className}\`}
+    >
+      <div className="flex items-center gap-3">
+        {/* Avatar */}
+        <div className="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center font-semibold">
+          {initials || '?'}
+        </div>
+
+        {/* Info */}
+        <div className="flex-1 min-w-0">
+          <h3 className="font-medium text-gray-900 truncate">
+            {contact.firstName} {contact.lastName}
+          </h3>
+          {contact.email && (
+            <p className="text-sm text-gray-500 truncate">{contact.email}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Tags */}
+      {contact.tags && contact.tags.length > 0 && (
+        <div className="mt-3 flex flex-wrap gap-1">
+          {contact.tags.slice(0, 3).map((tag) => (
+            <span
+              key={tag}
+              className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded-full"
+            >
+              {tag}
+            </span>
+          ))}
+          {contact.tags.length > 3 && (
+            <span className="px-2 py-0.5 text-xs text-gray-400">
+              +{contact.tags.length - 3}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+  }
+
+  getContactCardJS() {
+    return `/**
+ * ContactCard Component
+ * Displays a single contact in a card format
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+export function ContactCard({ contact, onClick, className = '' }) {
+  const initials = \`\${contact.firstName?.[0] || ''}\${contact.lastName?.[0] || ''}\`.toUpperCase();
+
+  return (
+    <div
+      onClick={onClick}
+      className={\`p-4 bg-white border rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer \${className}\`}
+    >
+      <div className="flex items-center gap-3">
+        {/* Avatar */}
+        <div className="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center font-semibold">
+          {initials || '?'}
+        </div>
+
+        {/* Info */}
+        <div className="flex-1 min-w-0">
+          <h3 className="font-medium text-gray-900 truncate">
+            {contact.firstName} {contact.lastName}
+          </h3>
+          {contact.email && (
+            <p className="text-sm text-gray-500 truncate">{contact.email}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Tags */}
+      {contact.tags && contact.tags.length > 0 && (
+        <div className="mt-3 flex flex-wrap gap-1">
+          {contact.tags.slice(0, 3).map((tag) => (
+            <span
+              key={tag}
+              className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded-full"
+            >
+              {tag}
+            </span>
+          ))}
+          {contact.tags.length > 3 && (
+            <span className="px-2 py-0.5 text-xs text-gray-400">
+              +{contact.tags.length - 3}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+  }
+
+  async generateContactForm(outputDir, ext, isTypeScript) {
+    const outputPath = path.join(outputDir, `ContactForm.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getContactFormTS()
+      : this.getContactFormJS();
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getContactFormTS() {
+    return `/**
+ * ContactForm Component
+ * Form for creating or editing contacts
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useCreateContact, useUpdateContact } from '@/lib/l4yercak3/hooks/use-contacts';
+import type { Contact } from '@/lib/l4yercak3/types';
+
+interface ContactFormProps {
+  contact?: Contact;
+  onSuccess?: (contact: Contact) => void;
+  onCancel?: () => void;
+  className?: string;
+}
+
+export function ContactForm({ contact, onSuccess, onCancel, className = '' }: ContactFormProps) {
+  const isEditing = !!contact;
+
+  const [formData, setFormData] = useState({
+    firstName: contact?.firstName || '',
+    lastName: contact?.lastName || '',
+    email: contact?.email || '',
+    phone: contact?.phone || '',
+  });
+
+  const createContact = useCreateContact();
+  const updateContact = useUpdateContact();
+
+  const isLoading = createContact.isPending || updateContact.isPending;
+  const error = createContact.error || updateContact.error;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    try {
+      let result: Contact;
+      if (isEditing && contact) {
+        result = await updateContact.mutateAsync({
+          id: contact.id,
+          ...formData,
+        });
+      } else {
+        result = await createContact.mutateAsync(formData);
+      }
+      onSuccess?.(result);
+    } catch {
+      // Error is handled by mutation state
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={\`space-y-4 \${className}\`}>
+      {error && (
+        <div className="p-3 bg-red-50 text-red-600 rounded-lg text-sm">
+          {error.message}
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label htmlFor="firstName" className="block text-sm font-medium text-gray-700 mb-1">
+            First Name
+          </label>
+          <input
+            type="text"
+            id="firstName"
+            name="firstName"
+            value={formData.firstName}
+            onChange={handleChange}
+            required
+            className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="lastName" className="block text-sm font-medium text-gray-700 mb-1">
+            Last Name
+          </label>
+          <input
+            type="text"
+            id="lastName"
+            name="lastName"
+            value={formData.lastName}
+            onChange={handleChange}
+            required
+            className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+          Email
+        </label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          value={formData.email}
+          onChange={handleChange}
+          className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
+          Phone
+        </label>
+        <input
+          type="tel"
+          id="phone"
+          name="phone"
+          value={formData.phone}
+          onChange={handleChange}
+          className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div className="flex gap-3 pt-2">
+        {onCancel && (
+          <button
+            type="button"
+            onClick={onCancel}
+            className="flex-1 px-4 py-2 border rounded-lg hover:bg-gray-50 transition-colors"
+          >
+            Cancel
+          </button>
+        )}
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+        >
+          {isLoading ? 'Saving...' : isEditing ? 'Update' : 'Create'}
+        </button>
+      </div>
+    </form>
+  );
+}
+`;
+  }
+
+  getContactFormJS() {
+    return `/**
+ * ContactForm Component
+ * Form for creating or editing contacts
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useCreateContact, useUpdateContact } from '@/lib/l4yercak3/hooks/use-contacts';
+
+export function ContactForm({ contact, onSuccess, onCancel, className = '' }) {
+  const isEditing = !!contact;
+
+  const [formData, setFormData] = useState({
+    firstName: contact?.firstName || '',
+    lastName: contact?.lastName || '',
+    email: contact?.email || '',
+    phone: contact?.phone || '',
+  });
+
+  const createContact = useCreateContact();
+  const updateContact = useUpdateContact();
+
+  const isLoading = createContact.isPending || updateContact.isPending;
+  const error = createContact.error || updateContact.error;
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      let result;
+      if (isEditing && contact) {
+        result = await updateContact.mutateAsync({
+          id: contact.id,
+          ...formData,
+        });
+      } else {
+        result = await createContact.mutateAsync(formData);
+      }
+      onSuccess?.(result);
+    } catch {
+      // Error is handled by mutation state
+    }
+  };
+
+  const handleChange = (e) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={\`space-y-4 \${className}\`}>
+      {error && (
+        <div className="p-3 bg-red-50 text-red-600 rounded-lg text-sm">
+          {error.message}
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label htmlFor="firstName" className="block text-sm font-medium text-gray-700 mb-1">
+            First Name
+          </label>
+          <input
+            type="text"
+            id="firstName"
+            name="firstName"
+            value={formData.firstName}
+            onChange={handleChange}
+            required
+            className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+
+        <div>
+          <label htmlFor="lastName" className="block text-sm font-medium text-gray-700 mb-1">
+            Last Name
+          </label>
+          <input
+            type="text"
+            id="lastName"
+            name="lastName"
+            value={formData.lastName}
+            onChange={handleChange}
+            required
+            className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+          Email
+        </label>
+        <input
+          type="email"
+          id="email"
+          name="email"
+          value={formData.email}
+          onChange={handleChange}
+          className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
+          Phone
+        </label>
+        <input
+          type="tel"
+          id="phone"
+          name="phone"
+          value={formData.phone}
+          onChange={handleChange}
+          className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div className="flex gap-3 pt-2">
+        {onCancel && (
+          <button
+            type="button"
+            onClick={onCancel}
+            className="flex-1 px-4 py-2 border rounded-lg hover:bg-gray-50 transition-colors"
+          >
+            Cancel
+          </button>
+        )}
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+        >
+          {isLoading ? 'Saving...' : isEditing ? 'Update' : 'Create'}
+        </button>
+      </div>
+    </form>
+  );
+}
+`;
+  }
+
+  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
+ * Displays a list of events with filtering
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+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;
+  className?: string;
+}
+
+export function EventList({ onSelect, className = '' }: EventListProps) {
+  const [statusFilter, setStatusFilter] = useState<string>('upcoming');
+
+  const { data: events, isLoading, error } = useEvents({
+    status: statusFilter as 'upcoming' | 'past' | 'all',
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 bg-red-50 text-red-600 rounded-lg">
+        Failed to load events: {error.message}
+      </div>
+    );
+  }
+
+  return (
+    <div className={\`space-y-4 \${className}\`}>
+      {/* Filter */}
+      <div className="flex gap-2">
+        {['upcoming', 'past', 'all'].map((status) => (
+          <button
+            key={status}
+            onClick={() => setStatusFilter(status)}
+            className={\`px-4 py-2 rounded-lg capitalize transition-colors \${
+              statusFilter === status
+                ? 'bg-blue-600 text-white'
+                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+            }\`}
+          >
+            {status}
+          </button>
+        ))}
+      </div>
+
+      {/* Event List */}
+      <div className="space-y-4">
+        {events?.map((event) => (
+          <EventCard
+            key={event.id}
+            event={event}
+            onClick={() => onSelect?.(event)}
+          />
+        ))}
+      </div>
+
+      {events?.length === 0 && (
+        <div className="text-center py-8 text-gray-500">
+          No events found
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+  }
+
+  getEventListJS() {
+    return `/**
+ * EventList Component
+ * Displays a list of events with filtering
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useEvents } from '@/lib/l4yercak3/hooks/use-events';
+import { EventCard } from './EventCard';
+
+export function EventList({ onSelect, className = '' }) {
+  const [statusFilter, setStatusFilter] = useState('upcoming');
+
+  const { data: events, isLoading, error } = useEvents({
+    status: statusFilter,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 bg-red-50 text-red-600 rounded-lg">
+        Failed to load events: {error.message}
+      </div>
+    );
+  }
+
+  return (
+    <div className={\`space-y-4 \${className}\`}>
+      {/* Filter */}
+      <div className="flex gap-2">
+        {['upcoming', 'past', 'all'].map((status) => (
+          <button
+            key={status}
+            onClick={() => setStatusFilter(status)}
+            className={\`px-4 py-2 rounded-lg capitalize transition-colors \${
+              statusFilter === status
+                ? 'bg-blue-600 text-white'
+                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+            }\`}
+          >
+            {status}
+          </button>
+        ))}
+      </div>
+
+      {/* Event List */}
+      <div className="space-y-4">
+        {events?.map((event) => (
+          <EventCard
+            key={event.id}
+            event={event}
+            onClick={() => onSelect?.(event)}
+          />
+        ))}
+      </div>
+
+      {events?.length === 0 && (
+        <div className="text-center py-8 text-gray-500">
+          No events found
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+  }
+
+  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
+ * Displays a single event in a card format
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import type { Event } from '@/lib/l4yercak3/types';
+
+interface EventCardProps {
+  event: Event;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function EventCard({ event, onClick, className = '' }: 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',
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      className={\`p-4 bg-white border rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer \${className}\`}
+    >
+      <div className="flex gap-4">
+        {/* Date Badge */}
+        {startDate && (
+          <div className="flex-shrink-0 w-16 text-center">
+            <div className="text-2xl font-bold text-blue-600">
+              {startDate.getDate()}
+            </div>
+            <div className="text-sm text-gray-500 uppercase">
+              {startDate.toLocaleDateString('en-US', { month: 'short' })}
+            </div>
+          </div>
+        )}
+
+        {/* Event Info */}
+        <div className="flex-1 min-w-0">
+          <h3 className="font-medium text-gray-900 truncate">{event.name}</h3>
+          {startDate && (
+            <p className="text-sm text-gray-500">{formatDate(startDate)}</p>
+          )}
+          {event.location && (
+            <p className="text-sm text-gray-500 mt-1">{event.location}</p>
+          )}
+        </div>
+
+        {/* Status Badge */}
+        <div>
+          <span
+            className={\`px-2 py-1 text-xs rounded-full \${
+              event.status === 'published'
+                ? 'bg-green-100 text-green-700'
+                : event.status === 'draft'
+                  ? 'bg-gray-100 text-gray-600'
+                  : 'bg-red-100 text-red-700'
+            }\`}
+          >
+            {event.status}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+  }
+
+  getEventCardJS() {
+    return `/**
+ * EventCard Component
+ * Displays a single event in a card format
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+export function EventCard({ event, onClick, className = '' }) {
+  const startDate = event.startDate ? new Date(event.startDate) : null;
+
+  const formatDate = (date) => {
+    return date.toLocaleDateString('en-US', {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      className={\`p-4 bg-white border rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer \${className}\`}
+    >
+      <div className="flex gap-4">
+        {/* Date Badge */}
+        {startDate && (
+          <div className="flex-shrink-0 w-16 text-center">
+            <div className="text-2xl font-bold text-blue-600">
+              {startDate.getDate()}
+            </div>
+            <div className="text-sm text-gray-500 uppercase">
+              {startDate.toLocaleDateString('en-US', { month: 'short' })}
+            </div>
+          </div>
+        )}
+
+        {/* Event Info */}
+        <div className="flex-1 min-w-0">
+          <h3 className="font-medium text-gray-900 truncate">{event.name}</h3>
+          {startDate && (
+            <p className="text-sm text-gray-500">{formatDate(startDate)}</p>
+          )}
+          {event.location && (
+            <p className="text-sm text-gray-500 mt-1">{event.location}</p>
+          )}
+        </div>
+
+        {/* Status Badge */}
+        <div>
+          <span
+            className={\`px-2 py-1 text-xs rounded-full \${
+              event.status === 'published'
+                ? 'bg-green-100 text-green-700'
+                : event.status === 'draft'
+                  ? 'bg-gray-100 text-gray-600'
+                  : 'bg-red-100 text-red-700'
+            }\`}
+          >
+            {event.status}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+  }
+
+  async generateDynamicForm(outputDir, ext, isTypeScript) {
+    const outputPath = path.join(outputDir, `DynamicForm.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getDynamicFormTS()
+      : this.getDynamicFormJS();
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getDynamicFormTS() {
+    return `/**
+ * DynamicForm Component
+ * Renders a form dynamically from L4YERCAK3 form schema
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useForm, useSubmitForm } from '@/lib/l4yercak3/hooks/use-forms';
+import type { FormField } from '@/lib/l4yercak3/types';
+
+interface DynamicFormProps {
+  formId: string;
+  onSuccess?: () => void;
+  className?: string;
+}
+
+export function DynamicForm({ formId, onSuccess, className = '' }: DynamicFormProps) {
+  const { data: form, isLoading: formLoading } = useForm(formId);
+  const submitForm = useSubmitForm();
+  const [formData, setFormData] = useState<Record<string, unknown>>({});
+
+  if (formLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (!form) {
+    return (
+      <div className="p-4 bg-red-50 text-red-600 rounded-lg">
+        Form not found
+      </div>
+    );
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    try {
+      await submitForm.mutateAsync({ formId, data: formData });
+      onSuccess?.();
+    } catch {
+      // Error handled by mutation state
+    }
+  };
+
+  const handleChange = (fieldId: string, value: unknown) => {
+    setFormData((prev) => ({ ...prev, [fieldId]: value }));
+  };
+
+  const renderField = (field: FormField) => {
+    const commonProps = {
+      id: field.id,
+      name: field.id,
+      required: field.required,
+      className: 'w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500',
+    };
+
+    switch (field.type) {
+      case 'text':
+      case 'email':
+      case 'phone':
+        return (
+          <input
+            type={field.type === 'phone' ? 'tel' : field.type}
+            {...commonProps}
+            value={(formData[field.id] as string) || ''}
+            onChange={(e) => handleChange(field.id, e.target.value)}
+          />
+        );
+
+      case 'textarea':
+        return (
+          <textarea
+            {...commonProps}
+            rows={4}
+            value={(formData[field.id] as string) || ''}
+            onChange={(e) => handleChange(field.id, e.target.value)}
+          />
+        );
+
+      case 'select':
+        return (
+          <select
+            {...commonProps}
+            value={(formData[field.id] as string) || ''}
+            onChange={(e) => handleChange(field.id, e.target.value)}
+          >
+            <option value="">Select...</option>
+            {field.options?.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        );
+
+      case 'checkbox':
+        return (
+          <input
+            type="checkbox"
+            id={field.id}
+            name={field.id}
+            checked={(formData[field.id] as boolean) || false}
+            onChange={(e) => handleChange(field.id, e.target.checked)}
+            className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+          />
+        );
+
+      default:
+        return (
+          <input
+            type="text"
+            {...commonProps}
+            value={(formData[field.id] as string) || ''}
+            onChange={(e) => handleChange(field.id, e.target.value)}
+          />
+        );
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={\`space-y-4 \${className}\`}>
+      <h2 className="text-xl font-semibold">{form.name}</h2>
+      {form.description && (
+        <p className="text-gray-600">{form.description}</p>
+      )}
+
+      {submitForm.error && (
+        <div className="p-3 bg-red-50 text-red-600 rounded-lg text-sm">
+          {submitForm.error.message}
+        </div>
+      )}
+
+      {form.fields?.map((field) => (
+        <div key={field.id}>
+          <label
+            htmlFor={field.id}
+            className={\`block text-sm font-medium text-gray-700 mb-1 \${
+              field.type === 'checkbox' ? 'inline ml-2' : ''
+            }\`}
+          >
+            {field.label}
+            {field.required && <span className="text-red-500 ml-1">*</span>}
+          </label>
+          {renderField(field)}
+        </div>
+      ))}
+
+      <button
+        type="submit"
+        disabled={submitForm.isPending}
+        className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+      >
+        {submitForm.isPending ? 'Submitting...' : 'Submit'}
+      </button>
+    </form>
+  );
+}
+`;
+  }
+
+  getDynamicFormJS() {
+    return `/**
+ * DynamicForm Component
+ * Renders a form dynamically from L4YERCAK3 form schema
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { useForm, useSubmitForm } from '@/lib/l4yercak3/hooks/use-forms';
+
+export function DynamicForm({ formId, onSuccess, className = '' }) {
+  const { data: form, isLoading: formLoading } = useForm(formId);
+  const submitForm = useSubmitForm();
+  const [formData, setFormData] = useState({});
+
+  if (formLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (!form) {
+    return (
+      <div className="p-4 bg-red-50 text-red-600 rounded-lg">
+        Form not found
+      </div>
+    );
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await submitForm.mutateAsync({ formId, data: formData });
+      onSuccess?.();
+    } catch {
+      // Error handled by mutation state
+    }
+  };
+
+  const handleChange = (fieldId, value) => {
+    setFormData((prev) => ({ ...prev, [fieldId]: value }));
+  };
+
+  const renderField = (field) => {
+    const commonProps = {
+      id: field.id,
+      name: field.id,
+      required: field.required,
+      className: 'w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500',
+    };
+
+    switch (field.type) {
+      case 'text':
+      case 'email':
+      case 'phone':
+        return (
+          <input
+            type={field.type === 'phone' ? 'tel' : field.type}
+            {...commonProps}
+            value={formData[field.id] || ''}
+            onChange={(e) => handleChange(field.id, e.target.value)}
+          />
+        );
+
+      case 'textarea':
+        return (
+          <textarea
+            {...commonProps}
+            rows={4}
+            value={formData[field.id] || ''}
+            onChange={(e) => handleChange(field.id, e.target.value)}
+          />
+        );
+
+      case 'select':
+        return (
+          <select
+            {...commonProps}
+            value={formData[field.id] || ''}
+            onChange={(e) => handleChange(field.id, e.target.value)}
+          >
+            <option value="">Select...</option>
+            {field.options?.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        );
+
+      case 'checkbox':
+        return (
+          <input
+            type="checkbox"
+            id={field.id}
+            name={field.id}
+            checked={formData[field.id] || false}
+            onChange={(e) => handleChange(field.id, e.target.checked)}
+            className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+          />
+        );
+
+      default:
+        return (
+          <input
+            type="text"
+            {...commonProps}
+            value={formData[field.id] || ''}
+            onChange={(e) => handleChange(field.id, e.target.value)}
+          />
+        );
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className={\`space-y-4 \${className}\`}>
+      <h2 className="text-xl font-semibold">{form.name}</h2>
+      {form.description && (
+        <p className="text-gray-600">{form.description}</p>
+      )}
+
+      {submitForm.error && (
+        <div className="p-3 bg-red-50 text-red-600 rounded-lg text-sm">
+          {submitForm.error.message}
+        </div>
+      )}
+
+      {form.fields?.map((field) => (
+        <div key={field.id}>
+          <label
+            htmlFor={field.id}
+            className={\`block text-sm font-medium text-gray-700 mb-1 \${
+              field.type === 'checkbox' ? 'inline ml-2' : ''
+            }\`}
+          >
+            {field.label}
+            {field.required && <span className="text-red-500 ml-1">*</span>}
+          </label>
+          {renderField(field)}
+        </div>
+      ))}
+
+      <button
+        type="submit"
+        disabled={submitForm.isPending}
+        className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
+      >
+        {submitForm.isPending ? 'Submitting...' : 'Submit'}
+      </button>
+    </form>
+  );
+}
+`;
+  }
+
+  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
+ * Displays a single product in a card format
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import type { Product } from '@/lib/l4yercak3/types';
+
+interface ProductCardProps {
+  product: Product;
+  onAddToCart?: (product: Product) => void;
+  className?: string;
+}
+
+export function ProductCard({ product, onAddToCart, className = '' }: ProductCardProps) {
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(price / 100);
+  };
+
+  return (
+    <div className={\`bg-white border rounded-lg shadow-sm overflow-hidden \${className}\`}>
+      {/* Image */}
+      {product.imageUrl ? (
+        <img
+          src={product.imageUrl}
+          alt={product.name}
+          className="w-full h-48 object-cover"
+        />
+      ) : (
+        <div className="w-full h-48 bg-gray-100 flex items-center justify-center">
+          <span className="text-gray-400">No image</span>
+        </div>
+      )}
+
+      {/* Content */}
+      <div className="p-4">
+        <h3 className="font-medium text-gray-900 truncate">{product.name}</h3>
+        {product.description && (
+          <p className="text-sm text-gray-500 mt-1 line-clamp-2">
+            {product.description}
+          </p>
+        )}
+
+        <div className="mt-4 flex items-center justify-between">
+          <span className="text-lg font-bold text-gray-900">
+            {formatPrice(product.price)}
+          </span>
+          {onAddToCart && (
+            <button
+              onClick={() => onAddToCart(product)}
+              className="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              Add to Cart
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+  }
+
+  getProductCardJS() {
+    return `/**
+ * ProductCard Component
+ * Displays a single product in a card format
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+export function ProductCard({ product, onAddToCart, className = '' }) {
+  const formatPrice = (price) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(price / 100);
+  };
+
+  return (
+    <div className={\`bg-white border rounded-lg shadow-sm overflow-hidden \${className}\`}>
+      {/* Image */}
+      {product.imageUrl ? (
+        <img
+          src={product.imageUrl}
+          alt={product.name}
+          className="w-full h-48 object-cover"
+        />
+      ) : (
+        <div className="w-full h-48 bg-gray-100 flex items-center justify-center">
+          <span className="text-gray-400">No image</span>
+        </div>
+      )}
+
+      {/* Content */}
+      <div className="p-4">
+        <h3 className="font-medium text-gray-900 truncate">{product.name}</h3>
+        {product.description && (
+          <p className="text-sm text-gray-500 mt-1 line-clamp-2">
+            {product.description}
+          </p>
+        )}
+
+        <div className="mt-4 flex items-center justify-between">
+          <span className="text-lg font-bold text-gray-900">
+            {formatPrice(product.price)}
+          </span>
+          {onAddToCart && (
+            <button
+              onClick={() => onAddToCart(product)}
+              className="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              Add to Cart
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+  }
+
+  async generateProductGrid(outputDir, ext, isTypeScript) {
+    const outputPath = path.join(outputDir, `ProductGrid.${ext}`);
+
+    const action = await checkFileOverwrite(outputPath);
+    if (action === 'skip') {
+      return null;
+    }
+
+    const content = isTypeScript
+      ? this.getProductGridTS()
+      : this.getProductGridJS();
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+
+  getProductGridTS() {
+    return `/**
+ * ProductGrid Component
+ * Displays a grid of products with optional filtering
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useProducts } from '@/lib/l4yercak3/hooks/use-products';
+import { ProductCard } from './ProductCard';
+import type { Product } from '@/lib/l4yercak3/types';
+
+interface ProductGridProps {
+  category?: string;
+  onAddToCart?: (product: Product) => void;
+  className?: string;
+}
+
+export function ProductGrid({ category, onAddToCart, className = '' }: ProductGridProps) {
+  const { data: products, isLoading, error } = useProducts({ category });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 bg-red-50 text-red-600 rounded-lg">
+        Failed to load products: {error.message}
+      </div>
+    );
+  }
+
+  return (
+    <div className={\`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 \${className}\`}>
+      {products?.map((product) => (
+        <ProductCard
+          key={product.id}
+          product={product}
+          onAddToCart={onAddToCart}
+        />
+      ))}
+
+      {products?.length === 0 && (
+        <div className="col-span-full text-center py-8 text-gray-500">
+          No products found
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+  }
+
+  getProductGridJS() {
+    return `/**
+ * ProductGrid Component
+ * Displays a grid of products with optional filtering
+ * Auto-generated by @l4yercak3/cli
+ */
+
+'use client';
+
+import { useProducts } from '@/lib/l4yercak3/hooks/use-products';
+import { ProductCard } from './ProductCard';
+
+export function ProductGrid({ category, onAddToCart, className = '' }) {
+  const { data: products, isLoading, error } = useProducts({ category });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 bg-red-50 text-red-600 rounded-lg">
+        Failed to load products: {error.message}
+      </div>
+    );
+  }
+
+  return (
+    <div className={\`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 \${className}\`}>
+      {products?.map((product) => (
+        <ProductCard
+          key={product.id}
+          product={product}
+          onAddToCart={onAddToCart}
+        />
+      ))}
+
+      {products?.length === 0 && (
+        <div className="col-span-full text-center py-8 text-gray-500">
+          No products found
+        </div>
+      )}
+    </div>
+  );
+}
+`;
+  }
+
+  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';");
+      exports.push("export { ContactForm } from './ContactForm';");
+    }
+
+    if (features.includes('events')) {
+      exports.push("export { EventList } from './EventList';");
+      exports.push("export { EventCard } from './EventCard';");
+    }
+
+    if (features.includes('forms')) {
+      exports.push("export { DynamicForm } from './DynamicForm';");
+    }
+
+    if (features.includes('products') || features.includes('checkout')) {
+      exports.push("export { ProductCard } from './ProductCard';");
+      exports.push("export { ProductGrid } from './ProductGrid';");
+    }
+
+    const content = `/**
+ * L4YERCAK3 Components
+ * Auto-generated by @l4yercak3/cli
+ */
+
+${exports.join('\n')}
+`;
+
+    return writeFileWithBackup(outputPath, content, action);
+  }
+}
+
+module.exports = new ComponentGenerator();