react-layout-sdk 1.0.0 → 1.1.0

package/bin/init.js

@@ -0,0 +1,161 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+const projectRoot = process.cwd();
+const srcDir = path.join(projectRoot, 'src');
+const componentsDir = path.join(srcDir, 'components');
+const appDir = path.join(srcDir, 'app');
+const pageDir = path.join(appDir, '[[...slug]]');
+
+// Helper to ensure directory exists
+function ensureDirSync(dirPath) {
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+    console.log(`Created directory: ${dirPath}`);
+  }
+}
+
+// Ensure base directories exist
+ensureDirSync(srcDir);
+ensureDirSync(componentsDir);
+ensureDirSync(appDir);
+ensureDirSync(pageDir);
+
+// 1. Create factory.ts
+const factoryPath = path.join(componentsDir, 'factory.ts');
+const factoryContent = `import Header from './Header';
+import Footer from './Footer';
+
+export const componentMap = {
+  'velox.header': Header,
+  'velox.footer': Footer,
+};
+`;
+if (!fs.existsSync(factoryPath)) {
+  fs.writeFileSync(factoryPath, factoryContent);
+  console.log('✅ Created src/components/factory.ts');
+} else {
+  console.log('⚠️  src/components/factory.ts already exists, skipping.');
+}
+
+// 2. Create Header.tsx
+const headerPath = path.join(componentsDir, 'Header.tsx');
+const headerContent = `import React from 'react';
+
+export default function Header(props: any) {
+  const title = props?.title || 'Velox Header';
+  const logoUrl = props?.logoUrl;
+
+  return (
+    <header style={{ padding: '20px', background: '#f5f5f5', borderBottom: '1px solid #ddd' }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+          {logoUrl && <img src={logoUrl} alt="Logo" width="40" />}
+          <h1 style={{ margin: 0, fontSize: '1.5rem' }}>{title}</h1>
+        </div>
+        <nav>
+          {/* Navigation links will go here */}
+        </nav>
+      </div>
+    </header>
+  );
+}
+`;
+if (!fs.existsSync(headerPath)) {
+  fs.writeFileSync(headerPath, headerContent);
+  console.log('✅ Created src/components/Header.tsx');
+} else {
+  console.log('⚠️  src/components/Header.tsx already exists, skipping.');
+}
+
+// 3. Create Footer.tsx
+const footerPath = path.join(componentsDir, 'Footer.tsx');
+const footerContent = `import React from 'react';
+
+export default function Footer(props: any) {
+  const text = props?.text || '© 2026 Velox Layout';
+  
+  return (
+    <footer style={{ padding: '20px', background: '#333', color: '#fff', textAlign: 'center', marginTop: '40px' }}>
+      <p style={{ margin: 0 }}>{text}</p>
+    </footer>
+  );
+}
+`;
+if (!fs.existsSync(footerPath)) {
+  fs.writeFileSync(footerPath, footerContent);
+  console.log('✅ Created src/components/Footer.tsx');
+} else {
+  console.log('⚠️  src/components/Footer.tsx already exists, skipping.');
+}
+
+// 4. Create app/[[...slug]]/page.tsx
+const pagePath = path.join(pageDir, 'page.tsx');
+const pageContent = `import React from 'react';
+import { fetchVeloxLayout, Placeholder } from 'react-layout-sdk';
+import { componentMap } from '@/components/factory';
+
+export default async function Page({ params }: { params: { slug?: string[] } }) {
+  const slugArray = params.slug || [];
+  const path = slugArray.join('/') || '/';
+
+  // Make sure to replace this URL with your actual Strapi URL
+  const STRAPI_URL = process.env.NEXT_PUBLIC_STRAPI_URL || 'http://localhost:1337';
+  
+  try {
+    const layoutData = await fetchVeloxLayout(STRAPI_URL, path, 'en');
+
+    if (!layoutData || !layoutData.strapi) {
+      return (
+        <div style={{ textAlign: 'center', padding: '50px' }}>
+          <h1>404 - Page/Layout Not Found</h1>
+          <p>Could not fetch layout for path: {path}</p>
+        </div>
+      );
+    }
+
+    const { route } = layoutData.strapi;
+
+    return (
+      <div className="layout-wrapper">
+        <Placeholder 
+          name="header" 
+          rendering={route.placeholders.header || []} 
+          componentMap={componentMap} 
+        />
+
+        <main style={{ minHeight: '60vh', padding: '20px' }}>
+          <Placeholder 
+            name="main" 
+            rendering={route.placeholders.main || []} 
+            componentMap={componentMap} 
+          />
+        </main>
+
+        <Placeholder 
+          name="footer" 
+          rendering={route.placeholders.footer || []} 
+          componentMap={componentMap} 
+        />
+      </div>
+    );
+  } catch (error) {
+    console.error('Error fetching layout:', error);
+    return (
+      <div style={{ textAlign: 'center', padding: '50px', color: 'red' }}>
+        <h1>Error Loading Layout</h1>
+        <p>Please check your Strapi server connection.</p>
+      </div>
+    );
+  }
+}
+`;
+if (!fs.existsSync(pagePath)) {
+  fs.writeFileSync(pagePath, pageContent);
+  console.log('✅ Created src/app/[[...slug]]/page.tsx');
+} else {
+  console.log('⚠️  src/app/[[...slug]]/page.tsx already exists, skipping.');
+}
+
+console.log('\\n🚀 Layout setup complete! Please verify your Strapi URL in src/app/[[...slug]]/page.tsx.');

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "react-layout-sdk",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React components for Velox SDK (Sitecore-like routing)",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "bin": {
+    "react-layout-sdk": "./bin/init.js"
+  },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"