react-layout-sdk 1.1.6 → 1.1.8

package/README.md

@@ -0,0 +1,72 @@
+# React Layout SDK (JD Layout System)
+
+The **React Layout SDK** is an enterprise-grade Frontend SDK designed to consume layout definitions from Strapi via the **Strapi Layout Plugin**. Inspired by robust headless ecosystems like Sitecore JSS, this SDK provides dynamic placeholder routing and a scaffold generator to stream-line Developer Experience (DX).
+
+## Installation
+
+Install the package using your favorite package manager:
+
+```bash
+npm install react-layout-sdk
+```
+
+## Quick Start (Project Scaffolding)
+
+To quickly set up your Next.js project to work with the JD Layout System, run the init command at the root of your project:
+
+```bash
+npx react-layout-sdk init
+```
+
+**What this does:**
+1. Creates a `src/components/factory.tsx` file for component mapping.
+2. Generates base boilerplate components like `Header.tsx` and `Footer.tsx`.
+3. Auto-configures your Next.js App Router (`app/[[...slug]]/page.tsx`) or Pages Router to catch all layout routes and fetch them dynamically using `fetchJDLayout`.
+
+## Component Scaffolding
+
+You can scaffold new React components and automatically map them to their corresponding Strapi components in `factory.tsx` using the generate command:
+
+```bash
+npx react-layout-sdk generate component <strapi-component-uid>
+```
+
+**Example:**
+```bash
+npx react-layout-sdk generate component blocks.hero-banner
+```
+*This command will:*
+- Create `src/components/HeroBanner.tsx`.
+- Automatically inject `import HeroBanner` and map `'blocks.hero-banner': HeroBanner` inside your `factory.tsx`.
+
+## API Reference
+
+### 1. `fetchJDLayout(apiUrl, slug, locale)`
+Fetches the layout structure and content from the Strapi backend.
+
+```typescript
+import { fetchJDLayout } from 'react-layout-sdk';
+
+const layoutData = await fetchJDLayout('http://localhost:1337', '/home', 'en');
+const { route } = layoutData.strapi;
+```
+
+### 2. `<Placeholder />`
+Renders a specific dynamic zone (like `header`, `main`, or `footer`) by matching the JSON data against your React components.
+
+```tsx
+import { Placeholder } from 'react-layout-sdk';
+import { componentMap } from '@/components/factory';
+
+<main>
+  <Placeholder 
+    name="main" 
+    rendering={route.placeholders.main || []} 
+    componentMap={componentMap} 
+  />
+</main>
+```
+
+## TypeScript Support
+
+This package comes with full TypeScript definitions, including `JDLayoutResponse`, `JDRoute`, and `JDContext`.

package/dist/index.d.mts

@@ -16,6 +16,24 @@ interface PlaceholderProps {
 }
 declare const Placeholder: React.FC<PlaceholderProps>;
 
+interface JDLayoutProps {
+    layoutData: JDLayoutResponse;
+    /**
+     * The Placeholder component from your application's Component Factory.
+     * This is required because your application defines the actual React components.
+     */
+    placeholderComponent: React.ComponentType<{
+        name: string;
+        rendering: any[];
+        customProps?: any;
+    }>;
+}
+/**
+ * A generic Layout component that provides the standard Header, Main, and Footer placeholders.
+ * Uses Tailwind CSS classes by default, with inline styles as fallbacks.
+ */
+declare const JDLayout: React.FC<JDLayoutProps>;
+
 interface JDPlaceholderData {
     __component: string;
     [key: string]: any;
@@ -23,6 +41,13 @@ interface JDPlaceholderData {
 interface JDRoute {
     name: string;
     displayName: string;
+    fields?: Record<string, any>;
+    seo?: {
+        metaTitle?: string;
+        metaDescription?: string;
+        metaImage?: any;
+        [key: string]: any;
+    };
     placeholders: Record<string, JDPlaceholderData[]>;
 }
 interface JDContext {
@@ -39,4 +64,4 @@ interface JDLayoutResponse {
 }
 declare const fetchJDLayout: (apiUrl: string, slug: string, locale?: string, options?: RequestInit) => Promise<JDLayoutResponse | null>;
 
-export { ComponentFactory, type ComponentFactoryProps, type JDContext, type JDLayoutResponse, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout };
+export { ComponentFactory, type ComponentFactoryProps, type JDContext, JDLayout, type JDLayoutProps, type JDLayoutResponse, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout };

package/dist/index.d.ts

@@ -16,6 +16,24 @@ interface PlaceholderProps {
 }
 declare const Placeholder: React.FC<PlaceholderProps>;
 
+interface JDLayoutProps {
+    layoutData: JDLayoutResponse;
+    /**
+     * The Placeholder component from your application's Component Factory.
+     * This is required because your application defines the actual React components.
+     */
+    placeholderComponent: React.ComponentType<{
+        name: string;
+        rendering: any[];
+        customProps?: any;
+    }>;
+}
+/**
+ * A generic Layout component that provides the standard Header, Main, and Footer placeholders.
+ * Uses Tailwind CSS classes by default, with inline styles as fallbacks.
+ */
+declare const JDLayout: React.FC<JDLayoutProps>;
+
 interface JDPlaceholderData {
     __component: string;
     [key: string]: any;
@@ -23,6 +41,13 @@ interface JDPlaceholderData {
 interface JDRoute {
     name: string;
     displayName: string;
+    fields?: Record<string, any>;
+    seo?: {
+        metaTitle?: string;
+        metaDescription?: string;
+        metaImage?: any;
+        [key: string]: any;
+    };
     placeholders: Record<string, JDPlaceholderData[]>;
 }
 interface JDContext {
@@ -39,4 +64,4 @@ interface JDLayoutResponse {
 }
 declare const fetchJDLayout: (apiUrl: string, slug: string, locale?: string, options?: RequestInit) => Promise<JDLayoutResponse | null>;
 
-export { ComponentFactory, type ComponentFactoryProps, type JDContext, type JDLayoutResponse, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout };
+export { ComponentFactory, type ComponentFactoryProps, type JDContext, JDLayout, type JDLayoutProps, type JDLayoutResponse, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout };

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ComponentFactory: () => ComponentFactory,
+  JDLayout: () => JDLayout,
   Placeholder: () => Placeholder,
   fetchJDLayout: () => fetchJDLayout
 });
@@ -86,6 +87,20 @@ var Placeholder = ({ name, rendering, customProps, componentMap }) => {
   )));
 };
 
+// src/Layout.tsx
+var import_react2 = __toESM(require("react"));
+var JDLayout = ({ layoutData, placeholderComponent: Placeholder2 }) => {
+  const { route, context } = layoutData.strapi;
+  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex flex-col min-h-screen", style: { display: "flex", flexDirection: "column", minHeight: "100vh" } }, /* @__PURE__ */ import_react2.default.createElement("header", null, /* @__PURE__ */ import_react2.default.createElement(
+    Placeholder2,
+    {
+      name: "header",
+      rendering: route.placeholders.header || [],
+      customProps: { locales: context.locales, currentLocale: context.language }
+    }
+  )), /* @__PURE__ */ import_react2.default.createElement("main", { className: "grow", style: { flexGrow: 1 } }, /* @__PURE__ */ import_react2.default.createElement(Placeholder2, { name: "main", rendering: route.placeholders.main || [] })), /* @__PURE__ */ import_react2.default.createElement("footer", null, /* @__PURE__ */ import_react2.default.createElement(Placeholder2, { name: "footer", rendering: route.placeholders.footer || [] })));
+};
+
 // src/index.ts
 var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
   try {
@@ -106,6 +121,7 @@ var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ComponentFactory,
+  JDLayout,
   Placeholder,
   fetchJDLayout
 });

package/dist/index.mjs

@@ -48,6 +48,20 @@ var Placeholder = ({ name, rendering, customProps, componentMap }) => {
   )));
 };
 
+// src/Layout.tsx
+import React2 from "react";
+var JDLayout = ({ layoutData, placeholderComponent: Placeholder2 }) => {
+  const { route, context } = layoutData.strapi;
+  return /* @__PURE__ */ React2.createElement("div", { className: "flex flex-col min-h-screen", style: { display: "flex", flexDirection: "column", minHeight: "100vh" } }, /* @__PURE__ */ React2.createElement("header", null, /* @__PURE__ */ React2.createElement(
+    Placeholder2,
+    {
+      name: "header",
+      rendering: route.placeholders.header || [],
+      customProps: { locales: context.locales, currentLocale: context.language }
+    }
+  )), /* @__PURE__ */ React2.createElement("main", { className: "grow", style: { flexGrow: 1 } }, /* @__PURE__ */ React2.createElement(Placeholder2, { name: "main", rendering: route.placeholders.main || [] })), /* @__PURE__ */ React2.createElement("footer", null, /* @__PURE__ */ React2.createElement(Placeholder2, { name: "footer", rendering: route.placeholders.footer || [] })));
+};
+
 // src/index.ts
 var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
   try {
@@ -67,6 +81,7 @@ var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
 };
 export {
   ComponentFactory,
+  JDLayout,
   Placeholder,
   fetchJDLayout
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-layout-sdk",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "React components for JD SDK (Sitecore-like routing)",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/Layout.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { JDLayoutResponse } from './index';
+
+export interface JDLayoutProps {
+  layoutData: JDLayoutResponse;
+  /**
+   * The Placeholder component from your application's Component Factory.
+   * This is required because your application defines the actual React components.
+   */
+  placeholderComponent: React.ComponentType<{ name: string; rendering: any[]; customProps?: any }>;
+}
+
+/**
+ * A generic Layout component that provides the standard Header, Main, and Footer placeholders.
+ * Uses Tailwind CSS classes by default, with inline styles as fallbacks.
+ */
+export const JDLayout: React.FC<JDLayoutProps> = ({ layoutData, placeholderComponent: Placeholder }) => {
+  const { route, context } = layoutData.strapi;
+
+  return (
+    <div className="flex flex-col min-h-screen" style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <header>
+        <Placeholder 
+          name="header" 
+          rendering={route.placeholders.header || []} 
+          customProps={{ locales: context.locales, currentLocale: context.language }} 
+        />
+      </header>
+      
+      <main className="grow" style={{ flexGrow: 1 }}>
+        <Placeholder name="main" rendering={route.placeholders.main || []} />
+      </main>
+      
+      <footer>
+        <Placeholder name="footer" rendering={route.placeholders.footer || []} />
+      </footer>
+    </div>
+  );
+};

package/src/index.ts

@@ -1,5 +1,7 @@
 export { Placeholder, ComponentFactory } from './Placeholder';
 export type { PlaceholderProps, ComponentFactoryProps } from './Placeholder';
+export { JDLayout } from './Layout';
+export type { JDLayoutProps } from './Layout';
 
 // Useful type definitions for the API response
 export interface JDPlaceholderData {
@@ -10,6 +12,13 @@ export interface JDPlaceholderData {
 export interface JDRoute {
   name: string;
   displayName: string;
+  fields?: Record<string, any>;
+  seo?: {
+    metaTitle?: string;
+    metaDescription?: string;
+    metaImage?: any;
+    [key: string]: any;
+  };
   placeholders: Record<string, JDPlaceholderData[]>;
 }