@sfdc-webapps/cli 1.0.2

package/test/e2e/fixtures/scenarios/scenario-crud-contacts/feature.ts

@@ -0,0 +1,11 @@
+import type { Feature } from '../../../../../src/types';
+
+const feature: Feature = {
+  templateDir: 'template',
+  dependencies: [],
+  packageJson: {
+    dependencies: {}
+  }
+};
+
+export default feature;

package/test/e2e/fixtures/scenarios/scenario-crud-contacts/template/digitalExperiences/webApplications/scenario-crud-contacts/src/__inherit__appLayout.tsx

@@ -0,0 +1 @@
+// Inherit appLayout from base app

package/test/e2e/fixtures/scenarios/scenario-crud-contacts/template/digitalExperiences/webApplications/scenario-crud-contacts/src/components/ContactDetail.tsx

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'react';
+import { Link, useParams } from 'react-router';
+import { contactsApi, type Contact } from '../utils/contactsApi';
+
+export default function ContactDetail() {
+  const { id } = useParams<{ id: string }>();
+  const [contact, setContact] = useState<Contact | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadContact();
+  }, [id]);
+
+  const loadContact = async () => {
+    if (!id) return;
+    setLoading(true);
+    const data = await contactsApi.getById(id);
+    setContact(data || null);
+    setLoading(false);
+  };
+
+  if (loading) return <div>Loading contact...</div>;
+  if (!contact) return <div>Contact not found</div>;
+
+  return (
+    <div className="contact-detail">
+      <h1>Contact Details</h1>
+
+      <div className="contact-info">
+        <div className="contact-field">
+          <label>Name:</label>
+          <span>{contact.name}</span>
+        </div>
+        <div className="contact-field">
+          <label>Email:</label>
+          <span>{contact.email}</span>
+        </div>
+        <div className="contact-field">
+          <label>Phone:</label>
+          <span>{contact.phone}</span>
+        </div>
+      </div>
+
+      <div className="contact-actions">
+        <Link to={`/contacts/${contact.id}/edit`} className="btn btn-primary">
+          Edit Contact
+        </Link>
+        <Link to="/contacts" className="btn">
+          Back to List
+        </Link>
+      </div>
+    </div>
+  );
+}

package/test/e2e/fixtures/scenarios/scenario-crud-contacts/template/digitalExperiences/webApplications/scenario-crud-contacts/src/components/ContactForm.tsx

@@ -0,0 +1,146 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { contactsApi, type Contact } from '../utils/contactsApi';
+
+export default function ContactForm() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const isEdit = !!id;
+
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: ''
+  });
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    if (isEdit && id) {
+      loadContact();
+    }
+  }, [id]);
+
+  const loadContact = async () => {
+    if (!id) return;
+    const contact = await contactsApi.getById(id);
+    if (contact) {
+      setFormData({
+        name: contact.name,
+        email: contact.email,
+        phone: contact.phone
+      });
+    }
+  };
+
+  const validate = () => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required';
+    }
+
+    if (!formData.email.trim()) {
+      newErrors.email = 'Email is required';
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      newErrors.email = 'Email is invalid';
+    }
+
+    if (!formData.phone.trim()) {
+      newErrors.phone = 'Phone is required';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validate()) return;
+
+    setLoading(true);
+    try {
+      if (isEdit && id) {
+        await contactsApi.update(id, formData);
+      } else {
+        await contactsApi.create(formData);
+      }
+      navigate('/contacts');
+    } catch (error) {
+      console.error('Failed to save contact:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+    // Clear error for this field when user starts typing
+    if (errors[name]) {
+      setErrors(prev => ({ ...prev, [name]: '' }));
+    }
+  };
+
+  return (
+    <div className="contact-form-container">
+      <h1>{isEdit ? 'Edit Contact' : 'New Contact'}</h1>
+
+      <form onSubmit={handleSubmit} className="contact-form">
+        <div className="form-group">
+          <label htmlFor="name">Name *</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            value={formData.name}
+            onChange={handleChange}
+            className={errors.name ? 'error' : ''}
+          />
+          {errors.name && <span className="error-message">{errors.name}</span>}
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="email">Email *</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            value={formData.email}
+            onChange={handleChange}
+            className={errors.email ? 'error' : ''}
+          />
+          {errors.email && <span className="error-message">{errors.email}</span>}
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="phone">Phone *</label>
+          <input
+            type="tel"
+            id="phone"
+            name="phone"
+            value={formData.phone}
+            onChange={handleChange}
+            className={errors.phone ? 'error' : ''}
+          />
+          {errors.phone && <span className="error-message">{errors.phone}</span>}
+        </div>
+
+        <div className="form-actions">
+          <button type="submit" className="btn btn-primary" disabled={loading}>
+            {loading ? 'Saving...' : isEdit ? 'Update Contact' : 'Create Contact'}
+          </button>
+          <button
+            type="button"
+            className="btn"
+            onClick={() => navigate('/contacts')}
+            disabled={loading}
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/test/e2e/fixtures/scenarios/scenario-crud-contacts/template/digitalExperiences/webApplications/scenario-crud-contacts/src/components/ContactList.tsx

@@ -0,0 +1,77 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router';
+import { contactsApi, type Contact } from '../utils/contactsApi';
+
+export default function ContactList() {
+  const [contacts, setContacts] = useState<Contact[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadContacts();
+  }, []);
+
+  const loadContacts = async () => {
+    setLoading(true);
+    const data = await contactsApi.getAll();
+    setContacts(data);
+    setLoading(false);
+  };
+
+  const handleDelete = async (id: string) => {
+    if (confirm('Are you sure you want to delete this contact?')) {
+      await contactsApi.delete(id);
+      loadContacts();
+    }
+  };
+
+  if (loading) return <div>Loading contacts...</div>;
+
+  return (
+    <div className="contact-list">
+      <div className="contact-list-header">
+        <h1>Contacts</h1>
+        <Link to="/contacts/new" className="btn btn-primary">
+          Add New Contact
+        </Link>
+      </div>
+
+      {contacts.length === 0 ? (
+        <p>No contacts found. Add your first contact!</p>
+      ) : (
+        <table className="contacts-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Phone</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {contacts.map((contact) => (
+              <tr key={contact.id}>
+                <td>{contact.name}</td>
+                <td>{contact.email}</td>
+                <td>{contact.phone}</td>
+                <td className="contact-actions">
+                  <Link to={`/contacts/${contact.id}`} className="btn btn-sm">
+                    View
+                  </Link>
+                  <Link to={`/contacts/${contact.id}/edit`} className="btn btn-sm">
+                    Edit
+                  </Link>
+                  <button
+                    onClick={() => handleDelete(contact.id)}
+                    className="btn btn-sm btn-danger"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

package/test/e2e/fixtures/scenarios/scenario-crud-contacts/template/digitalExperiences/webApplications/scenario-crud-contacts/src/routes.tsx

@@ -0,0 +1,36 @@
+import type { RouteObject } from 'react-router';
+import AppLayout from './appLayout';
+import ContactList from './components/ContactList';
+import ContactDetail from './components/ContactDetail';
+import ContactForm from './components/ContactForm';
+
+export const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <AppLayout />,
+    children: [
+      {
+        path: 'contacts',
+        handle: { showInNavigation: true, label: 'Contacts' },
+        children: [
+          {
+            index: true,
+            element: <ContactList />
+          },
+          {
+            path: 'new',
+            element: <ContactForm />
+          },
+          {
+            path: ':id',
+            element: <ContactDetail />
+          },
+          {
+            path: ':id/edit',
+            element: <ContactForm />
+          }
+        ]
+      }
+    ]
+  }
+];

package/test/e2e/fixtures/scenarios/scenario-crud-contacts/template/digitalExperiences/webApplications/scenario-crud-contacts/src/styles/__append__global.css

@@ -0,0 +1,176 @@
+
+/* Contact List Styles */
+.contact-list {
+  padding: 2rem;
+}
+
+.contact-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+}
+
+.contacts-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: white;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.contacts-table th,
+.contacts-table td {
+  padding: 1rem;
+  text-align: left;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.contacts-table th {
+  background: #f9fafb;
+  font-weight: 600;
+  color: #374151;
+}
+
+.contacts-table tr:last-child td {
+  border-bottom: none;
+}
+
+.contact-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* Contact Detail Styles */
+.contact-detail {
+  padding: 2rem;
+  max-width: 600px;
+}
+
+.contact-info {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 2rem;
+}
+
+.contact-field {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.contact-field label {
+  font-weight: 600;
+  color: #374151;
+  min-width: 100px;
+}
+
+.contact-field span {
+  color: #6b7280;
+}
+
+/* Contact Form Styles */
+.contact-form-container {
+  padding: 2rem;
+  max-width: 600px;
+}
+
+.contact-form {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: #374151;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 1rem;
+  transition: border-color 0.2s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.form-group input.error {
+  border-color: #ef4444;
+}
+
+.error-message {
+  display: block;
+  margin-top: 0.5rem;
+  color: #ef4444;
+  font-size: 0.875rem;
+}
+
+.form-actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+/* Button Styles */
+.btn {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-decoration: none;
+  display: inline-block;
+  background: #f3f4f6;
+  color: #374151;
+}
+
+.btn:hover {
+  background: #e5e7eb;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #2563eb;
+}
+
+.btn-danger {
+  background: #ef4444;
+  color: white;
+}
+
+.btn-danger:hover {
+  background: #dc2626;
+}
+
+.btn-sm {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/test/e2e/fixtures/scenarios/scenario-crud-contacts/template/digitalExperiences/webApplications/scenario-crud-contacts/src/utils/contactsApi.ts

@@ -0,0 +1,42 @@
+export interface Contact {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+}
+
+// Mock API for contacts
+let contacts: Contact[] = [
+  { id: '1', name: 'Alice Johnson', email: 'alice@example.com', phone: '555-0101' },
+  { id: '2', name: 'Bob Smith', email: 'bob@example.com', phone: '555-0102' }
+];
+
+export const contactsApi = {
+  getAll: async (): Promise<Contact[]> => {
+    return Promise.resolve([...contacts]);
+  },
+
+  getById: async (id: string): Promise<Contact | undefined> => {
+    return Promise.resolve(contacts.find(c => c.id === id));
+  },
+
+  create: async (contact: Omit<Contact, 'id'>): Promise<Contact> => {
+    const newContact = { ...contact, id: Date.now().toString() };
+    contacts.push(newContact);
+    return Promise.resolve(newContact);
+  },
+
+  update: async (id: string, contact: Partial<Contact>): Promise<Contact | undefined> => {
+    const index = contacts.findIndex(c => c.id === id);
+    if (index === -1) return undefined;
+    contacts[index] = { ...contacts[index], ...contact };
+    return Promise.resolve(contacts[index]);
+  },
+
+  delete: async (id: string): Promise<boolean> => {
+    const index = contacts.findIndex(c => c.id === id);
+    if (index === -1) return false;
+    contacts.splice(index, 1);
+    return true;
+  }
+};

package/test/e2e/fixtures/scenarios/scenario-navigation-menu/feature.ts

@@ -0,0 +1,10 @@
+import type { Feature } from '../../../../../src/types.js';
+
+const feature: Feature = {
+  templateDir: 'template',
+  packageJson: {
+    dependencies: {}
+  }
+};
+
+export default feature;

package/test/e2e/fixtures/scenarios/scenario-navigation-menu/template/digitalExperiences/webApplications/scenario-navigation-menu/src/__append__appLayout.tsx

@@ -0,0 +1,4 @@
+// Add navigation menu to layout
+import NavigationMenu from './components/NavigationMenu';
+
+// This would be integrated into the existing appLayout

package/test/e2e/fixtures/scenarios/scenario-navigation-menu/template/digitalExperiences/webApplications/scenario-navigation-menu/src/components/NavigationMenu.tsx

@@ -0,0 +1,17 @@
+import { NavLink } from 'react-router';
+
+export default function NavigationMenu({ routes }: { routes: any[] }) {
+  return (
+    <nav className="navigation-menu">
+      <ul>
+        {routes.map((route) => (
+          <li key={route.path}>
+            <NavLink to={route.path}>
+              {route.handle?.label || route.path}
+            </NavLink>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/test/e2e/fixtures/single-operations/feature-file-append/feature.ts

@@ -0,0 +1,10 @@
+import type { Feature } from '../../../../../src/types.js';
+
+const feature: Feature = {
+  templateDir: 'template',
+  packageJson: {
+    dependencies: {}
+  }
+};
+
+export default feature;

package/test/e2e/fixtures/single-operations/feature-file-append/template/digitalExperiences/webApplications/feature-file-append/src/styles/__append__global.css

@@ -0,0 +1,10 @@
+/* Custom styles from feature-append */
+:root {
+  --feature-append-color: #066afe;
+  --feature-append-background: #ffffff;
+}
+
+.feature-append-specific {
+  color: var(--feature-append-color);
+  background-color: var(--feature-append-background);
+}

package/test/e2e/fixtures/single-operations/feature-file-inherit/feature.ts

@@ -0,0 +1,10 @@
+import type { Feature } from '../../../../../src/types.js';
+
+const feature: Feature = {
+  templateDir: 'template',
+  packageJson: {
+    dependencies: {}
+  }
+};
+
+export default feature;

package/test/e2e/fixtures/single-operations/feature-file-inherit/template/digitalExperiences/webApplications/feature-file-inherit/src/__inherit__appLayout.tsx

@@ -0,0 +1 @@
+// This file will be inherited from the base app

package/test/e2e/fixtures/single-operations/feature-file-inherit/template/digitalExperiences/webApplications/feature-file-inherit/src/__inherit__home.tsx

@@ -0,0 +1 @@
+// This file will be inherited from the base app

package/test/e2e/fixtures/single-operations/feature-file-prepend/feature.ts

@@ -0,0 +1,10 @@
+import type { Feature } from '../../../../../src/types.js';
+
+const feature: Feature = {
+  templateDir: 'template',
+  packageJson: {
+    dependencies: {}
+  }
+};
+
+export default feature;

package/test/e2e/fixtures/single-operations/feature-file-prepend/template/digitalExperiences/webApplications/feature-file-prepend/src/__prepend__index.tsx

@@ -0,0 +1,2 @@
+// Feature initialization code (prepended to index.tsx)
+console.log('Feature prepend initialized');

package/test/e2e/fixtures/single-operations/feature-import-merge/feature.ts

@@ -0,0 +1,10 @@
+import type { Feature } from '../../../../../src/types.js';
+
+const feature: Feature = {
+  templateDir: 'template',
+  packageJson: {
+    dependencies: {}
+  }
+};
+
+export default feature;

package/test/e2e/fixtures/single-operations/feature-import-merge/template/digitalExperiences/webApplications/feature-import-merge/src/routes.tsx

@@ -0,0 +1,18 @@
+import type { RouteObject } from 'react-router';
+import { Outlet } from 'react-router';
+import AppLayout from './appLayout';
+import Settings from './settings';
+
+export const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <AppLayout />,
+    children: [
+      {
+        path: 'settings',
+        element: <Settings />,
+        handle: { showInNavigation: true, label: 'Settings' }
+      }
+    ]
+  }
+];

package/test/e2e/fixtures/single-operations/feature-import-merge/template/digitalExperiences/webApplications/feature-import-merge/src/settings.tsx

@@ -0,0 +1,8 @@
+export default function Settings() {
+  return (
+    <div>
+      <h1>Settings Page</h1>
+      <p>This page was added by feature-import-merge.</p>
+    </div>
+  );
+}