react-layout-sdk 1.1.7 → 1.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +19 -1
  2. package/dist/index.d.ts +19 -1
  3. package/dist/index.js +16 -0
  4. package/dist/index.mjs +15 -0
  5. package/package.json +1 -1
  6. package/src/Layout.tsx +39 -0
  7. package/src/index.ts +2 -0
package/dist/index.d.mts CHANGED
@@ -16,6 +16,24 @@ interface PlaceholderProps {
16
16
  }
17
17
  declare const Placeholder: React.FC<PlaceholderProps>;
18
18
 
19
+ interface JDLayoutProps {
20
+ layoutData: JDLayoutResponse;
21
+ /**
22
+ * The Placeholder component from your application's Component Factory.
23
+ * This is required because your application defines the actual React components.
24
+ */
25
+ placeholderComponent: React.ComponentType<{
26
+ name: string;
27
+ rendering: any[];
28
+ customProps?: any;
29
+ }>;
30
+ }
31
+ /**
32
+ * A generic Layout component that provides the standard Header, Main, and Footer placeholders.
33
+ * Uses Tailwind CSS classes by default, with inline styles as fallbacks.
34
+ */
35
+ declare const JDLayout: React.FC<JDLayoutProps>;
36
+
19
37
  interface JDPlaceholderData {
20
38
  __component: string;
21
39
  [key: string]: any;
@@ -46,4 +64,4 @@ interface JDLayoutResponse {
46
64
  }
47
65
  declare const fetchJDLayout: (apiUrl: string, slug: string, locale?: string, options?: RequestInit) => Promise<JDLayoutResponse | null>;
48
66
 
49
- export { ComponentFactory, type ComponentFactoryProps, type JDContext, type JDLayoutResponse, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout };
67
+ export { ComponentFactory, type ComponentFactoryProps, type JDContext, JDLayout, type JDLayoutProps, type JDLayoutResponse, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout };
package/dist/index.d.ts CHANGED
@@ -16,6 +16,24 @@ interface PlaceholderProps {
16
16
  }
17
17
  declare const Placeholder: React.FC<PlaceholderProps>;
18
18
 
19
+ interface JDLayoutProps {
20
+ layoutData: JDLayoutResponse;
21
+ /**
22
+ * The Placeholder component from your application's Component Factory.
23
+ * This is required because your application defines the actual React components.
24
+ */
25
+ placeholderComponent: React.ComponentType<{
26
+ name: string;
27
+ rendering: any[];
28
+ customProps?: any;
29
+ }>;
30
+ }
31
+ /**
32
+ * A generic Layout component that provides the standard Header, Main, and Footer placeholders.
33
+ * Uses Tailwind CSS classes by default, with inline styles as fallbacks.
34
+ */
35
+ declare const JDLayout: React.FC<JDLayoutProps>;
36
+
19
37
  interface JDPlaceholderData {
20
38
  __component: string;
21
39
  [key: string]: any;
@@ -46,4 +64,4 @@ interface JDLayoutResponse {
46
64
  }
47
65
  declare const fetchJDLayout: (apiUrl: string, slug: string, locale?: string, options?: RequestInit) => Promise<JDLayoutResponse | null>;
48
66
 
49
- export { ComponentFactory, type ComponentFactoryProps, type JDContext, type JDLayoutResponse, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout };
67
+ export { ComponentFactory, type ComponentFactoryProps, type JDContext, JDLayout, type JDLayoutProps, type JDLayoutResponse, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout };
package/dist/index.js CHANGED
@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
31
31
  var index_exports = {};
32
32
  __export(index_exports, {
33
33
  ComponentFactory: () => ComponentFactory,
34
+ JDLayout: () => JDLayout,
34
35
  Placeholder: () => Placeholder,
35
36
  fetchJDLayout: () => fetchJDLayout
36
37
  });
@@ -86,6 +87,20 @@ var Placeholder = ({ name, rendering, customProps, componentMap }) => {
86
87
  )));
87
88
  };
88
89
 
90
+ // src/Layout.tsx
91
+ var import_react2 = __toESM(require("react"));
92
+ var JDLayout = ({ layoutData, placeholderComponent: Placeholder2 }) => {
93
+ const { route, context } = layoutData.strapi;
94
+ 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(
95
+ Placeholder2,
96
+ {
97
+ name: "header",
98
+ rendering: route.placeholders.header || [],
99
+ customProps: { locales: context.locales, currentLocale: context.language }
100
+ }
101
+ )), /* @__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 || [] })));
102
+ };
103
+
89
104
  // src/index.ts
90
105
  var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
91
106
  try {
@@ -106,6 +121,7 @@ var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
106
121
  // Annotate the CommonJS export names for ESM import in node:
107
122
  0 && (module.exports = {
108
123
  ComponentFactory,
124
+ JDLayout,
109
125
  Placeholder,
110
126
  fetchJDLayout
111
127
  });
package/dist/index.mjs CHANGED
@@ -48,6 +48,20 @@ var Placeholder = ({ name, rendering, customProps, componentMap }) => {
48
48
  )));
49
49
  };
50
50
 
51
+ // src/Layout.tsx
52
+ import React2 from "react";
53
+ var JDLayout = ({ layoutData, placeholderComponent: Placeholder2 }) => {
54
+ const { route, context } = layoutData.strapi;
55
+ 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(
56
+ Placeholder2,
57
+ {
58
+ name: "header",
59
+ rendering: route.placeholders.header || [],
60
+ customProps: { locales: context.locales, currentLocale: context.language }
61
+ }
62
+ )), /* @__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 || [] })));
63
+ };
64
+
51
65
  // src/index.ts
52
66
  var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
53
67
  try {
@@ -67,6 +81,7 @@ var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
67
81
  };
68
82
  export {
69
83
  ComponentFactory,
84
+ JDLayout,
70
85
  Placeholder,
71
86
  fetchJDLayout
72
87
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-layout-sdk",
3
- "version": "1.1.7",
3
+ "version": "1.1.8",
4
4
  "description": "React components for JD SDK (Sitecore-like routing)",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
package/src/Layout.tsx ADDED
@@ -0,0 +1,39 @@
1
+ import React from 'react';
2
+ import { JDLayoutResponse } from './index';
3
+
4
+ export interface JDLayoutProps {
5
+ layoutData: JDLayoutResponse;
6
+ /**
7
+ * The Placeholder component from your application's Component Factory.
8
+ * This is required because your application defines the actual React components.
9
+ */
10
+ placeholderComponent: React.ComponentType<{ name: string; rendering: any[]; customProps?: any }>;
11
+ }
12
+
13
+ /**
14
+ * A generic Layout component that provides the standard Header, Main, and Footer placeholders.
15
+ * Uses Tailwind CSS classes by default, with inline styles as fallbacks.
16
+ */
17
+ export const JDLayout: React.FC<JDLayoutProps> = ({ layoutData, placeholderComponent: Placeholder }) => {
18
+ const { route, context } = layoutData.strapi;
19
+
20
+ return (
21
+ <div className="flex flex-col min-h-screen" style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
22
+ <header>
23
+ <Placeholder
24
+ name="header"
25
+ rendering={route.placeholders.header || []}
26
+ customProps={{ locales: context.locales, currentLocale: context.language }}
27
+ />
28
+ </header>
29
+
30
+ <main className="grow" style={{ flexGrow: 1 }}>
31
+ <Placeholder name="main" rendering={route.placeholders.main || []} />
32
+ </main>
33
+
34
+ <footer>
35
+ <Placeholder name="footer" rendering={route.placeholders.footer || []} />
36
+ </footer>
37
+ </div>
38
+ );
39
+ };
package/src/index.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  export { Placeholder, ComponentFactory } from './Placeholder';
2
2
  export type { PlaceholderProps, ComponentFactoryProps } from './Placeholder';
3
+ export { JDLayout } from './Layout';
4
+ export type { JDLayoutProps } from './Layout';
3
5
 
4
6
  // Useful type definitions for the API response
5
7
  export interface JDPlaceholderData {