react-layout-sdk 1.0.0 → 1.1.1

package/bin/init.js

@@ -0,0 +1,171 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+const projectRoot = process.cwd();
+
+// Detect project structure
+const hasSrc = fs.existsSync(path.join(projectRoot, 'src'));
+const basePath = hasSrc ? path.join(projectRoot, 'src') : projectRoot;
+
+const componentsDir = path.join(basePath, 'components');
+const hasAppRouter = fs.existsSync(path.join(basePath, 'app'));
+const hasPagesRouter = fs.existsSync(path.join(basePath, 'pages'));
+
+if (!hasAppRouter && !hasPagesRouter) {
+  console.error("❌ Could not find an 'app' or 'pages' directory. Make sure you are running this in the root of a Next.js project.");
+  process.exit(1);
+}
+
+// Helper to ensure directory exists
+function ensureDirSync(dirPath) {
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+    console.log(`📁 Created directory: ${dirPath}`);
+  }
+}
+
+ensureDirSync(componentsDir);
+
+// 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 components/factory.ts');
+}
+
+// 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>
+      </div>
+    </header>
+  );
+}
+`;
+if (!fs.existsSync(headerPath)) {
+  fs.writeFileSync(headerPath, headerContent);
+  console.log('✅ Created components/Header.tsx');
+}
+
+// 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 components/Footer.tsx');
+}
+
+// 4. Generate Page routing
+if (hasAppRouter) {
+  console.log('🔍 Detected Next.js App Router');
+  const pageDir = path.join(basePath, 'app', '[[...slug]]');
+  ensureDirSync(pageDir);
+  
+  const appPagePath = path.join(pageDir, 'page.tsx');
+  const appPageContent = `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('/') || '/';
+  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 <h1>404 - Not Found</h1>;
+
+    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) {
+    return <h1>Error Loading Layout</h1>;
+  }
+}
+`;
+  if (!fs.existsSync(appPagePath)) {
+    fs.writeFileSync(appPagePath, appPageContent);
+    console.log('✅ Created app/[[...slug]]/page.tsx');
+  }
+} else if (hasPagesRouter) {
+  console.log('🔍 Detected Next.js Pages Router');
+  const pagePath = path.join(basePath, 'pages', '[[...slug]].tsx');
+  const pagesContent = `import React from 'react';
+import { fetchVeloxLayout, Placeholder } from 'react-layout-sdk';
+import { componentMap } from '@/components/factory';
+
+export default function LayoutPage({ layoutData, error }: any) {
+  if (error || !layoutData?.strapi) return <h1>404 - Layout Not Found</h1>;
+
+  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>
+  );
+}
+
+export async function getServerSideProps(context: any) {
+  const slugArray = context.params?.slug || [];
+  const path = slugArray.join('/') || '/';
+  const STRAPI_URL = process.env.NEXT_PUBLIC_STRAPI_URL || 'http://localhost:1337';
+
+  try {
+    const layoutData = await fetchVeloxLayout(STRAPI_URL, path, 'en');
+    if (!layoutData) return { notFound: true };
+
+    return { props: { layoutData } };
+  } catch (error) {
+    return { props: { error: true } };
+  }
+}
+`;
+  if (!fs.existsSync(pagePath)) {
+    fs.writeFileSync(pagePath, pagesContent);
+    console.log('✅ Created pages/[[...slug]].tsx');
+  }
+}
+
+console.log('\n🚀 Layout setup complete! Please verify your Strapi URL in your routing page.');

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "react-layout-sdk",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "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"