@schandlergarcia/sf-web-components 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",
@@ -27,6 +27,7 @@
   "files": [
     "dist",
     "scripts",
+    "src/templates",
     "README.md",
     ".a4drules"
   ],

package/scripts/postinstall.mjs

@@ -116,8 +116,76 @@ for (const pathToRemove of pathsToRemove) {
   }
 }
 
+// Copy page templates
+const templatesDir = path.join(path.dirname(__dirname), 'src/templates/pages');
+const targetPagesDir = path.join(cwd, 'src/pages');
+
+console.log('\n📄 Installing page templates...\n');
+
+let templatesInstalled = 0;
+const installedTemplates = [];
+
+if (fs.existsSync(templatesDir)) {
+  // Create target pages directory if it doesn't exist
+  if (!fs.existsSync(targetPagesDir)) {
+    fs.mkdirSync(targetPagesDir, { recursive: true });
+  }
+
+  const templates = fs.readdirSync(templatesDir).filter(f => f.endsWith('.template'));
+
+  for (const template of templates) {
+    const sourcePath = path.join(templatesDir, template);
+    const targetFileName = template.replace('.template', '');
+    const targetPath = path.join(targetPagesDir, targetFileName);
+    const pageName = targetFileName.replace('.tsx', '');
+
+    // Always overwrite to ensure latest templates
+    try {
+      const content = fs.readFileSync(sourcePath, 'utf-8');
+      fs.writeFileSync(targetPath, content, 'utf-8');
+      console.log(`  ✓ Installed ${targetFileName}`);
+      templatesInstalled++;
+      installedTemplates.push(pageName);
+    } catch (error) {
+      console.error(`  ✗ Failed to install ${targetFileName}: ${error.message}`);
+    }
+  }
+}
+
+// Update routes.tsx to use the installed templates
+const routesPath = path.join(cwd, 'src/routes.tsx');
+if (fs.existsSync(routesPath) && installedTemplates.length > 0) {
+  console.log('\n🔄 Updating routes.tsx...\n');
+
+  try {
+    let routesContent = fs.readFileSync(routesPath, 'utf-8');
+    let routesUpdated = false;
+
+    for (const pageName of installedTemplates) {
+      // Match import statements like: import Home from './features/.../Home' or import Home from './pages/Home'
+      const importRegex = new RegExp(`import ${pageName} from ['"]\\./(features|pages)/[^'"]+/${pageName}['"];?`, 'g');
+
+      if (importRegex.test(routesContent)) {
+        routesContent = routesContent.replace(
+          importRegex,
+          `import ${pageName} from './pages/${pageName}';`
+        );
+        routesUpdated = true;
+        console.log(`  ✓ Updated ${pageName} import`);
+      }
+    }
+
+    if (routesUpdated) {
+      fs.writeFileSync(routesPath, routesContent, 'utf-8');
+    }
+  } catch (error) {
+    console.error(`  ✗ Failed to update routes.tsx: ${error.message}`);
+  }
+}
+
 console.log('\n📊 Summary:');
 console.log(`  - Updated ${filesUpdated} files`);
 console.log(`  - Migrated ${importsUpdated} imports`);
 console.log(`  - Removed ${removedCount} local items`);
+console.log(`  - Installed ${templatesInstalled} page templates`);
 console.log('\n✅ Migration complete! All imports now use @schandlergarcia/sf-web-components\n');

package/src/templates/pages/Home.tsx.template

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { Button } from '@schandlergarcia/sf-web-components';
+
+export default function HomePage() {
+	const navigate = useNavigate();
+	const [searchText, setSearchText] = useState("");
+
+	const handleSearch = (e: React.FormEvent) => {
+		e.preventDefault();
+		// Navigate to your search results page
+		console.log("Search:", searchText);
+	};
+
+	return (
+		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8">
+			<div className="w-full max-w-4xl">
+				<div className="text-center mb-8">
+					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">
+						Welcome
+					</h1>
+					<p className="text-lg text-slate-600 dark:text-slate-300">
+						Your application is ready to go.
+					</p>
+				</div>
+				<form onSubmit={handleSearch} className="flex flex-col gap-4 items-center">
+					<div className="flex gap-2 w-full max-w-2xl">
+						<input
+							type="text"
+							value={searchText}
+							onChange={(e) => setSearchText(e.target.value)}
+							placeholder="Search..."
+							className="flex-1 px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400"
+						/>
+						<Button type="submit">Search</Button>
+					</div>
+					<div className="flex gap-2">
+						<Button variant="outline" onClick={() => navigate("/about")}>
+							Learn More
+						</Button>
+					</div>
+				</form>
+			</div>
+		</div>
+	);
+}

package/src/templates/pages/NotFound.tsx.template

@@ -0,0 +1,19 @@
+import { useNavigate } from "react-router";
+import { Button } from '@schandlergarcia/sf-web-components';
+
+export default function NotFound() {
+	const navigate = useNavigate();
+
+	return (
+		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8">
+			<div className="w-full max-w-2xl text-center">
+				<h1 className="text-6xl font-bold text-slate-900 dark:text-slate-50 mb-4">404</h1>
+				<h2 className="text-2xl font-semibold text-slate-700 dark:text-slate-300 mb-4">Page Not Found</h2>
+				<p className="text-lg text-slate-600 dark:text-slate-400 mb-8">
+					The page you're looking for doesn't exist.
+				</p>
+				<Button onClick={() => navigate("/")}>Go Home</Button>
+			</div>
+		</div>
+	);
+}

package/src/templates/pages/Search.tsx.template

@@ -0,0 +1,22 @@
+export default function Search() {
+	return (
+		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8">
+			<div className="w-full max-w-4xl">
+				<div className="text-center mb-8">
+					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Search</h1>
+					<p className="text-lg text-slate-600 dark:text-slate-300">Find records across your organization.</p>
+				</div>
+				<div className="flex gap-2">
+					<input
+						type="text"
+						placeholder="Search..."
+						className="flex-1 px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400"
+					/>
+					<button className="px-4 py-2 bg-slate-900 dark:bg-slate-50 text-white dark:text-slate-900 rounded-lg hover:bg-slate-700 dark:hover:bg-slate-200 transition-colors">
+						Search
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}