@schandlergarcia/sf-web-components 1.0.14 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",

package/scripts/postinstall.mjs

@@ -123,6 +123,7 @@ 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
@@ -136,20 +137,49 @@ if (fs.existsSync(templatesDir)) {
     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}`);
+    }
+  }
+}
 
-    // Only copy if target doesn't exist (don't overwrite user's pages)
-    if (!fs.existsSync(targetPath)) {
-      try {
-        const content = fs.readFileSync(sourcePath, 'utf-8');
-        fs.writeFileSync(targetPath, content, 'utf-8');
-        console.log(`  ✓ Installed ${targetFileName}`);
-        templatesInstalled++;
-      } 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`);
       }
-    } else {
-      console.log(`  ⊘ Skipped ${targetFileName} (already exists)`);
     }
+
+    if (routesUpdated) {
+      fs.writeFileSync(routesPath, routesContent, 'utf-8');
+    }
+  } catch (error) {
+    console.error(`  ✗ Failed to update routes.tsx: ${error.message}`);
   }
 }
 

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

@@ -1,46 +1,15 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { Button } from '@schandlergarcia/sf-web-components';
+import { RocketLaunchIcon } from "@heroicons/react/24/outline";
+import { EmptyState } 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 className="flex min-h-screen items-center justify-center bg-slate-50 dark:bg-slate-950 transition-colors">
+			<EmptyState
+				size="lg"
+				icon={<RocketLaunchIcon className="h-14 w-14" />}
+				heading="Bespoke App Template"
+				body="Component library loaded and ready to go."
+			/>
 		</div>
 	);
 }

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

@@ -1,21 +1,12 @@
 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="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-950 transition-colors">
 			<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>
+				<p className="text-center text-slate-500 dark:text-slate-400">Search functionality coming soon...</p>
 			</div>
 		</div>
 	);