@damarkuncoro/layout-engine-react 0.1.0

package/README.md

@@ -0,0 +1,36 @@
+# layout-engine-react
+
+Adaptor React untuk `layout-engine`. Mengubah headless nodes menjadi komponen React untuk dipakai di aplikasi.
+
+## Instalasi
+
+```bash
+npm install @damarkuncoro/layout-engine-react
+```
+
+Pastikan `react` dan `react-dom` tersedia.
+
+## Penggunaan
+
+```jsx
+import React from "react"
+import { SidebarLayout, Stack, Box } from "layout-engine-react"
+
+export default function App() {
+  const sidebar = Box({ children: "Sidebar" })
+  const content = Stack({ gap: 16, children: [Box({ children: "Card 1" }), Box({ children: "Card 2" })] })
+  return React.createElement(SidebarLayout, {
+    sidebar,
+    children: content,
+    sidebarWidth: { base: 120, md: 200, xl: 280 }
+  })
+}
+```
+
+## Fitur
+- Komponen: Box, Flex, Stack, Grid, SidebarLayout, DashboardLayout.
+- Otomatisasi key untuk child React agar aman dari warning.
+- ESM-only, tipe tersedia.
+
+## Lisensi
+MIT

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import * as H from "layout-engine";
+export type { CSSLength, LayoutProps, HeadlessNode, SidebarLayoutContract, DashboardLayoutContract, FlexProps, StackProps, GridProps, ResponsiveValue, BreakpointKey } from "layout-engine";
+export { resolveResponsive, breakpoints } from "layout-engine";
+export declare function Box(props: H.LayoutProps & {
+    children?: any;
+}): any;
+export declare function Flex(props: H.FlexProps & {
+    children?: any;
+}): any;
+export declare function Stack(props: H.StackProps & {
+    children?: any;
+}): any;
+export declare function Grid(props: H.GridProps & {
+    children?: any;
+}): any;
+export declare function SidebarLayout(props: any): any;
+export declare function DashboardLayout(props: H.DashboardLayoutContract): any;
+export { renderNodeToReact } from "./renderReact.js";

package/dist/index.js

@@ -0,0 +1,28 @@
+import * as H from "layout-engine";
+import { renderNodeToReact } from "./renderReact.js";
+export { resolveResponsive, breakpoints } from "layout-engine";
+export function Box(props) {
+    const node = H.Box(props);
+    return renderNodeToReact(node);
+}
+export function Flex(props) {
+    const node = H.Flex(props);
+    return renderNodeToReact(node);
+}
+export function Stack(props) {
+    const node = H.Stack(props);
+    return renderNodeToReact(node);
+}
+export function Grid(props) {
+    const node = H.Grid(props);
+    return renderNodeToReact(node);
+}
+export function SidebarLayout(props) {
+    const node = H.SidebarLayout(props);
+    return renderNodeToReact(node);
+}
+export function DashboardLayout(props) {
+    const node = H.DashboardLayout(props);
+    return renderNodeToReact(node);
+}
+export { renderNodeToReact } from "./renderReact.js";

package/dist/renderReact.d.ts

@@ -0,0 +1,6 @@
+type HeadlessNode = {
+    type: string;
+    props: Record<string, any>;
+};
+export declare const renderNodeToReact: (node: HeadlessNode) => any;
+export {};

package/dist/renderReact.js

@@ -0,0 +1,31 @@
+import React from "react";
+const toChild = (c) => {
+    if (c === null || c === undefined || c === false)
+        return null;
+    if (Array.isArray(c))
+        return c.map((item, idx) => {
+            const v = toChild(item);
+            if (React.isValidElement(v)) {
+                if (v.key == null) {
+                    return React.cloneElement(v, { key: idx });
+                }
+                return v;
+            }
+            return React.createElement(React.Fragment, { key: idx }, v);
+        });
+    if (typeof c === "object" && c.type && c.props)
+        return renderNodeToReact(c);
+    return c;
+};
+export const renderNodeToReact = (node) => {
+    const { type, props } = node;
+    const { children, className, style, ...rest } = props || {};
+    // Merge className and style like standard React
+    const mergedProps = { ...rest };
+    if (className)
+        mergedProps.className = className;
+    if (style)
+        mergedProps.style = { ...style };
+    const child = toChild(children);
+    return React.createElement(type, mergedProps, child);
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@damarkuncoro/layout-engine-react",
+  "version": "0.1.0",
+  "description": "React adapter for layout-engine (headless → React components)",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "layout",
+    "react",
+    "headless",
+    "responsive",
+    "primitives"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@damarkuncoro/layout-engine": "^0.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0",
+    "@damarkuncoro/layout-engine": "file:../layout-engine"
+  }
+}