react-layout-sdk 1.1.7 → 1.1.9

package/dist/index.d.mts

@@ -16,6 +16,46 @@ 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 JDPageProps {
+    params: Promise<{
+        slug?: string[];
+    }>;
+    apiUrl: string;
+    componentMap: Record<string, React.ComponentType<any>>;
+    supportedLocales?: string[];
+    defaultLocale?: string;
+    notFoundComponent?: React.ReactNode;
+    maintenanceComponent?: React.ReactNode;
+}
+declare const JDPage: ({ params, apiUrl, componentMap, supportedLocales, defaultLocale, notFoundComponent, maintenanceComponent }: JDPageProps) => Promise<React.JSX.Element>;
+declare const generateJDMetadata: (params: Promise<{
+    slug?: string[];
+}>, apiUrl: string, supportedLocales?: string[], defaultLocale?: string) => Promise<{
+    title: string;
+    description: string | undefined;
+} | {
+    title: string;
+    description?: undefined;
+}>;
+
 interface JDPlaceholderData {
     __component: string;
     [key: string]: any;
@@ -46,4 +86,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, JDPage, type JDPageProps, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout, generateJDMetadata };

package/dist/index.d.ts

@@ -16,6 +16,46 @@ 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 JDPageProps {
+    params: Promise<{
+        slug?: string[];
+    }>;
+    apiUrl: string;
+    componentMap: Record<string, React.ComponentType<any>>;
+    supportedLocales?: string[];
+    defaultLocale?: string;
+    notFoundComponent?: React.ReactNode;
+    maintenanceComponent?: React.ReactNode;
+}
+declare const JDPage: ({ params, apiUrl, componentMap, supportedLocales, defaultLocale, notFoundComponent, maintenanceComponent }: JDPageProps) => Promise<React.JSX.Element>;
+declare const generateJDMetadata: (params: Promise<{
+    slug?: string[];
+}>, apiUrl: string, supportedLocales?: string[], defaultLocale?: string) => Promise<{
+    title: string;
+    description: string | undefined;
+} | {
+    title: string;
+    description?: undefined;
+}>;
+
 interface JDPlaceholderData {
     __component: string;
     [key: string]: any;
@@ -46,4 +86,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, JDPage, type JDPageProps, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout, generateJDMetadata };

package/dist/index.js

@@ -31,8 +31,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ComponentFactory: () => ComponentFactory,
+  JDLayout: () => JDLayout,
+  JDPage: () => JDPage,
   Placeholder: () => Placeholder,
-  fetchJDLayout: () => fetchJDLayout
+  fetchJDLayout: () => fetchJDLayout,
+  generateJDMetadata: () => generateJDMetadata
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -86,6 +89,79 @@ 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/Page.tsx
+var import_react3 = __toESM(require("react"));
+var JDPage = async ({
+  params,
+  apiUrl,
+  componentMap,
+  supportedLocales = ["en"],
+  defaultLocale = "en",
+  notFoundComponent = /* @__PURE__ */ import_react3.default.createElement("h1", null, "404 - Not Found"),
+  maintenanceComponent = /* @__PURE__ */ import_react3.default.createElement("h1", null, "Error Loading Layout")
+}) => {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams?.slug || [];
+  let currentLocale = defaultLocale;
+  let layoutSlug = [...slugArray];
+  if (layoutSlug.length > 0 && supportedLocales.includes(layoutSlug[0])) {
+    currentLocale = layoutSlug[0];
+    layoutSlug = layoutSlug.slice(1);
+  }
+  const path = layoutSlug.join("/") || "home";
+  try {
+    const layoutData = await fetchJDLayout(apiUrl, path, currentLocale);
+    if (!layoutData || !layoutData.strapi) {
+      return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, notFoundComponent);
+    }
+    const CustomPlaceholder = (props) => /* @__PURE__ */ import_react3.default.createElement(Placeholder, { ...props, componentMap });
+    return /* @__PURE__ */ import_react3.default.createElement(JDLayout, { layoutData, placeholderComponent: CustomPlaceholder });
+  } catch (error) {
+    console.error("[JD SDK] JDPage Error:", error);
+    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, maintenanceComponent);
+  }
+};
+var generateJDMetadata = async (params, apiUrl, supportedLocales = ["en"], defaultLocale = "en") => {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams?.slug || [];
+  let currentLocale = defaultLocale;
+  let layoutSlug = [...slugArray];
+  if (layoutSlug.length > 0 && supportedLocales.includes(layoutSlug[0])) {
+    currentLocale = layoutSlug[0];
+    layoutSlug = layoutSlug.slice(1);
+  }
+  const path = layoutSlug.join("/") || "home";
+  try {
+    const layoutData = await fetchJDLayout(apiUrl, path, currentLocale);
+    if (layoutData?.strapi?.route?.seo) {
+      const { metaTitle, metaDescription } = layoutData.strapi.route.seo;
+      return {
+        title: metaTitle || layoutData.strapi.route.displayName,
+        description: metaDescription
+      };
+    }
+    return {
+      title: layoutData?.strapi?.route?.displayName || ""
+    };
+  } catch (error) {
+    return { title: "" };
+  }
+};
+
 // src/index.ts
 var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
   try {
@@ -106,6 +182,9 @@ var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ComponentFactory,
+  JDLayout,
+  JDPage,
   Placeholder,
-  fetchJDLayout
+  fetchJDLayout,
+  generateJDMetadata
 });

package/dist/index.mjs

@@ -48,6 +48,79 @@ 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/Page.tsx
+import React3 from "react";
+var JDPage = async ({
+  params,
+  apiUrl,
+  componentMap,
+  supportedLocales = ["en"],
+  defaultLocale = "en",
+  notFoundComponent = /* @__PURE__ */ React3.createElement("h1", null, "404 - Not Found"),
+  maintenanceComponent = /* @__PURE__ */ React3.createElement("h1", null, "Error Loading Layout")
+}) => {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams?.slug || [];
+  let currentLocale = defaultLocale;
+  let layoutSlug = [...slugArray];
+  if (layoutSlug.length > 0 && supportedLocales.includes(layoutSlug[0])) {
+    currentLocale = layoutSlug[0];
+    layoutSlug = layoutSlug.slice(1);
+  }
+  const path = layoutSlug.join("/") || "home";
+  try {
+    const layoutData = await fetchJDLayout(apiUrl, path, currentLocale);
+    if (!layoutData || !layoutData.strapi) {
+      return /* @__PURE__ */ React3.createElement(React3.Fragment, null, notFoundComponent);
+    }
+    const CustomPlaceholder = (props) => /* @__PURE__ */ React3.createElement(Placeholder, { ...props, componentMap });
+    return /* @__PURE__ */ React3.createElement(JDLayout, { layoutData, placeholderComponent: CustomPlaceholder });
+  } catch (error) {
+    console.error("[JD SDK] JDPage Error:", error);
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, maintenanceComponent);
+  }
+};
+var generateJDMetadata = async (params, apiUrl, supportedLocales = ["en"], defaultLocale = "en") => {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams?.slug || [];
+  let currentLocale = defaultLocale;
+  let layoutSlug = [...slugArray];
+  if (layoutSlug.length > 0 && supportedLocales.includes(layoutSlug[0])) {
+    currentLocale = layoutSlug[0];
+    layoutSlug = layoutSlug.slice(1);
+  }
+  const path = layoutSlug.join("/") || "home";
+  try {
+    const layoutData = await fetchJDLayout(apiUrl, path, currentLocale);
+    if (layoutData?.strapi?.route?.seo) {
+      const { metaTitle, metaDescription } = layoutData.strapi.route.seo;
+      return {
+        title: metaTitle || layoutData.strapi.route.displayName,
+        description: metaDescription
+      };
+    }
+    return {
+      title: layoutData?.strapi?.route?.displayName || ""
+    };
+  } catch (error) {
+    return { title: "" };
+  }
+};
+
 // src/index.ts
 var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
   try {
@@ -67,6 +140,9 @@ var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
 };
 export {
   ComponentFactory,
+  JDLayout,
+  JDPage,
   Placeholder,
-  fetchJDLayout
+  fetchJDLayout,
+  generateJDMetadata
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-layout-sdk",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "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/Page.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { fetchJDLayout } from './index';
+import { JDLayout } from './Layout';
+import { Placeholder } from './Placeholder';
+
+export interface JDPageProps {
+  params: Promise<{ slug?: string[] }>;
+  apiUrl: string;
+  componentMap: Record<string, React.ComponentType<any>>;
+  supportedLocales?: string[];
+  defaultLocale?: string;
+  notFoundComponent?: React.ReactNode;
+  maintenanceComponent?: React.ReactNode;
+}
+
+export const JDPage = async ({ 
+  params, 
+  apiUrl, 
+  componentMap, 
+  supportedLocales = ['en'], 
+  defaultLocale = 'en',
+  notFoundComponent = <h1>404 - Not Found</h1>,
+  maintenanceComponent = <h1>Error Loading Layout</h1>
+}: JDPageProps) => {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams?.slug || [];
+  
+  let currentLocale = defaultLocale;
+  let layoutSlug = [...slugArray];
+
+  if (layoutSlug.length > 0 && supportedLocales.includes(layoutSlug[0])) {
+    currentLocale = layoutSlug[0];
+    layoutSlug = layoutSlug.slice(1);
+  }
+
+  const path = layoutSlug.join('/') || 'home';
+
+  try {
+    const layoutData = await fetchJDLayout(apiUrl, path, currentLocale);
+    if (!layoutData || !layoutData.strapi) {
+      return <>{notFoundComponent}</>;
+    }
+
+    const CustomPlaceholder = (props: any) => (
+       <Placeholder {...props} componentMap={componentMap} />
+    );
+
+    return <JDLayout layoutData={layoutData} placeholderComponent={CustomPlaceholder} />;
+  } catch (error) {
+    console.error('[JD SDK] JDPage Error:', error);
+    return <>{maintenanceComponent}</>;
+  }
+};
+
+export const generateJDMetadata = async (
+  params: Promise<{ slug?: string[] }>, 
+  apiUrl: string,
+  supportedLocales: string[] = ['en'],
+  defaultLocale: string = 'en'
+) => {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams?.slug || [];
+  
+  let currentLocale = defaultLocale;
+  let layoutSlug = [...slugArray];
+
+  if (layoutSlug.length > 0 && supportedLocales.includes(layoutSlug[0])) {
+    currentLocale = layoutSlug[0];
+    layoutSlug = layoutSlug.slice(1);
+  }
+
+  const path = layoutSlug.join('/') || 'home';
+
+  try {
+    const layoutData = await fetchJDLayout(apiUrl, path, currentLocale);
+    if (layoutData?.strapi?.route?.seo) {
+      const { metaTitle, metaDescription } = layoutData.strapi.route.seo;
+      return {
+        title: metaTitle || layoutData.strapi.route.displayName,
+        description: metaDescription,
+      };
+    }
+    return {
+      title: layoutData?.strapi?.route?.displayName || "",
+    };
+  } catch (error) {
+    return { title: '' };
+  }
+};

package/src/index.ts

@@ -1,5 +1,9 @@
 export { Placeholder, ComponentFactory } from './Placeholder';
 export type { PlaceholderProps, ComponentFactoryProps } from './Placeholder';
+export { JDLayout } from './Layout';
+export type { JDLayoutProps } from './Layout';
+export { JDPage, generateJDMetadata } from './Page';
+export type { JDPageProps } from './Page';
 
 // Useful type definitions for the API response
 export interface JDPlaceholderData {