@damarkuncoro/layout-engine 0.1.0 → 0.1.1

package/README.md

@@ -14,6 +14,20 @@ npm install @damarkuncoro/layout-engine
 - Structures: SidebarLayout.
 - Sistem responsive berbasis breakpoints (sm, md, lg, xl, 2xl).
 
+## Import ESM & CJS
+
+- ESM (direkomendasikan):
+
+```js
+import { Box, Grid, renderToString } from "@damarkuncoro/layout-engine"
+```
+
+- CJS:
+
+```js
+const { Box, Grid, renderToString } = require("@damarkuncoro/layout-engine")
+```
+
 ## Penggunaan Dasar
 
 Render headless ke HTML:
@@ -34,12 +48,12 @@ console.log(renderToString(page))
 Responsive utility:
 
 ```js
-import { resolveResponsive } from "layout-engine"
+import { resolveResponsive } from "@damarkuncoro/layout-engine"
 const gap = resolveResponsive({ base: 8, md: 16, xl: 24 }, 768) // 16
 ```
 
 ## TypeScript
-- ESM-only, deklarasi tipe tersedia pada `dist/index.d.ts`.
+- Deklarasi tipe tersedia pada `lib/esm/index.d.ts`.
 
 ## Lisensi
 MIT

package/lib/cjs/core/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./styleResolver.js"), exports);
+__exportStar(require("./spacingSystem.js"), exports);
+__exportStar(require("./responsiveSystem.js"), exports);

package/lib/cjs/core/render.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderToString = void 0;
+const styleToString = (style) => {
+    if (!style)
+        return "";
+    const entries = Object.entries(style)
+        .filter(([_, v]) => v !== undefined && v !== null && v !== "")
+        .map(([k, v]) => {
+        const prop = k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+        return `${prop}:${String(v)}`;
+    });
+    return entries.join(";");
+};
+const escapeHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const renderChild = (child) => {
+    if (child === null || child === undefined || child === false)
+        return "";
+    if (Array.isArray(child))
+        return child.map(renderChild).join("");
+    if (typeof child === "object" && child.type && child.props) {
+        return (0, exports.renderToString)(child);
+    }
+    return escapeHtml(String(child));
+};
+/**
+ * Merender HeadlessNode menjadi string HTML dengan inline style.
+ */
+const renderToString = (node) => {
+    const { type, props } = node;
+    const { children, style, className, ...rest } = props || {};
+    const styleStr = styleToString(style);
+    const attr = (className ? ` class="${className}"` : "") +
+        (styleStr ? ` style="${styleStr}"` : "") +
+        Object.entries(rest)
+            .map(([k, v]) => {
+            if (v === undefined || v === null || typeof v === "object")
+                return "";
+            return ` ${k}="${String(v)}"`;
+        })
+            .join("");
+    const inner = renderChild(children);
+    return `<${type}${attr}>${inner}</${type}>`;
+};
+exports.renderToString = renderToString;

package/lib/cjs/core/responsiveSystem.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveResponsive = exports.breakpoints = void 0;
+exports.breakpoints = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536
+};
+const resolveResponsive = (value, width) => {
+    if (value === undefined)
+        return undefined;
+    if (!Array.isArray(value) && typeof value !== "object")
+        return value;
+    const order = [
+        { min: 0 },
+        { key: "sm", min: exports.breakpoints.sm },
+        { key: "md", min: exports.breakpoints.md },
+        { key: "lg", min: exports.breakpoints.lg },
+        { key: "xl", min: exports.breakpoints.xl },
+        { key: "2xl", min: exports.breakpoints["2xl"] }
+    ];
+    let resolved = undefined;
+    if (Array.isArray(value)) {
+        for (let i = 0; i < order.length; i++) {
+            if (width >= order[i].min && i < value.length) {
+                resolved = value[i];
+            }
+        }
+        return resolved;
+    }
+    const obj = value;
+    if (obj.base !== undefined)
+        resolved = obj.base;
+    for (const it of order) {
+        if (!it.key)
+            continue;
+        if (width >= it.min && obj[it.key] !== undefined) {
+            resolved = obj[it.key];
+        }
+    }
+    return resolved;
+};
+exports.resolveResponsive = resolveResponsive;

package/lib/cjs/core/spacingSystem.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.space = exports.spacingScale = void 0;
+exports.spacingScale = {
+    0: 0,
+    1: 4,
+    2: 8,
+    3: 12,
+    4: 16,
+    5: 24,
+    6: 32,
+    7: 40,
+    8: 48,
+    9: 64
+};
+const space = (i) => {
+    const v = exports.spacingScale[i];
+    const n = typeof v === "number" ? v : i;
+    return `${n}px`;
+};
+exports.space = space;

package/lib/cjs/core/styleResolver.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeUnit = void 0;
+/**
+ * Mengubah nilai panjang CSS: angka → px, string tetap.
+ * Contoh: 16 -> "16px", "2rem" -> "2rem", undefined -> undefined
+ */
+const normalizeUnit = (value) => {
+    if (typeof value === "number") {
+        return `${value}px`;
+    }
+    return value;
+};
+exports.normalizeUnit = normalizeUnit;

package/lib/cjs/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./system/index.js";
+export * from "./primitives/index.js";
+export * from "./structures/index.js";
+export * from "./patterns/index.js";
+export * from "./presets/index.js";
+export { resolveResponsive, breakpoints, type BreakpointKey } from "./core/responsiveSystem.js";
+export * from "./core/spacingSystem.js";
+export * from "./core/styleResolver.js";
+export * from "./core/render.js";

package/lib/cjs/index.js

@@ -0,0 +1,28 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breakpoints = exports.resolveResponsive = void 0;
+__exportStar(require("./system/index.js"), exports);
+__exportStar(require("./primitives/index.js"), exports);
+__exportStar(require("./structures/index.js"), exports);
+__exportStar(require("./patterns/index.js"), exports);
+__exportStar(require("./presets/index.js"), exports);
+var responsiveSystem_js_1 = require("./core/responsiveSystem.js");
+Object.defineProperty(exports, "resolveResponsive", { enumerable: true, get: function () { return responsiveSystem_js_1.resolveResponsive; } });
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return responsiveSystem_js_1.breakpoints; } });
+__exportStar(require("./core/spacingSystem.js"), exports);
+__exportStar(require("./core/styleResolver.js"), exports);
+__exportStar(require("./core/render.js"), exports);

package/lib/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/lib/cjs/patterns/AuthLayout.d.ts

@@ -0,0 +1,17 @@
+import type { NodeLike } from "../system/contracts.js";
+export interface AuthLayoutProps {
+    children: NodeLike;
+    logo?: NodeLike;
+    subtitle?: string;
+}
+/**
+ * AuthLayout - layout untuk halaman login/register
+ * Konsisten centered dengan form di tengah layar
+ */
+export declare function AuthLayout({ children, logo, subtitle }: AuthLayoutProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/lib/cjs/patterns/AuthLayout.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthLayout = AuthLayout;
+const Flex_js_1 = require("../primitives/Flex.js");
+const Box_js_1 = require("../primitives/Box.js");
+/**
+ * AuthLayout - layout untuk halaman login/register
+ * Konsisten centered dengan form di tengah layar
+ */
+function AuthLayout({ children, logo, subtitle }) {
+    return (0, Flex_js_1.Flex)({
+        style: {
+            minHeight: "100vh",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        children: (0, Box_js_1.Box)({
+            style: {
+                width: "100%",
+                maxWidth: "400px",
+                padding: "24px"
+            },
+            children: (0, Flex_js_1.Flex)({
+                direction: "column",
+                gap: 4,
+                children: [
+                    logo ? (0, Box_js_1.Box)({ children: logo }) : null,
+                    subtitle ? (0, Box_js_1.Box)({ children: subtitle }) : null,
+                    children
+                ].filter(Boolean)
+            })
+        })
+    });
+}

package/lib/cjs/patterns/DashboardLayout.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardLayout = DashboardLayout;
+const Flex_js_1 = require("../primitives/Flex.js");
+const SidebarLayout_js_1 = require("../structures/SidebarLayout.js");
+function DashboardLayout({ header, sidebar, children }) {
+    return (0, Flex_js_1.Flex)({
+        direction: "column",
+        children: [
+            header,
+            (0, SidebarLayout_js_1.SidebarLayout)({ sidebar, children })
+        ]
+    });
+}

package/lib/cjs/patterns/LandingLayout.d.ts

@@ -0,0 +1,20 @@
+import type { NodeLike } from "../system/contracts.js";
+export interface LandingLayoutProps {
+    header?: NodeLike;
+    hero?: NodeLike;
+    features?: NodeLike;
+    pricing?: NodeLike;
+    footer?: NodeLike;
+    children?: NodeLike;
+}
+/**
+ * LandingLayout - layout untuk halaman landing page
+ * Dengan section hero, features, pricing, dan footer
+ */
+export declare function LandingLayout({ header, hero, features, pricing, footer, children }: LandingLayoutProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/lib/cjs/patterns/LandingLayout.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LandingLayout = LandingLayout;
+const Flex_js_1 = require("../primitives/Flex.js");
+const Box_js_1 = require("../primitives/Box.js");
+const Container_js_1 = require("../primitives/Container.js");
+/**
+ * LandingLayout - layout untuk halaman landing page
+ * Dengan section hero, features, pricing, dan footer
+ */
+function LandingLayout({ header, hero, features, pricing, footer, children }) {
+    return (0, Flex_js_1.Flex)({
+        direction: "column",
+        children: [
+            // Sticky header
+            header ? (0, Box_js_1.Box)({
+                style: { position: "sticky", top: 0, zIndex: 10 },
+                children: (0, Container_js_1.Container)({
+                    children: header
+                })
+            }) : null,
+            // Main content
+            (0, Box_js_1.Box)({
+                children: children !== null && children !== void 0 ? children : (0, Flex_js_1.Flex)({
+                    direction: "column",
+                    children: [
+                        hero ? (0, Box_js_1.Box)({ children: hero }) : null,
+                        features ? (0, Box_js_1.Box)({ children: features }) : null,
+                        pricing ? (0, Box_js_1.Box)({ children: pricing }) : null
+                    ].filter(Boolean)
+                })
+            }),
+            // Footer
+            footer ? (0, Box_js_1.Box)({
+                children: (0, Container_js_1.Container)({
+                    padding: 6,
+                    children: footer
+                })
+            }) : null
+        ].filter(Boolean)
+    });
+}

package/lib/cjs/patterns/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./DashboardLayout.js";
+export * from "./AuthLayout.js";
+export * from "./LandingLayout.js";

package/lib/cjs/patterns/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DashboardLayout.js"), exports);
+__exportStar(require("./AuthLayout.js"), exports);
+__exportStar(require("./LandingLayout.js"), exports);

package/lib/cjs/presets/index.d.ts

@@ -0,0 +1 @@
+export * from "./presets.js";

package/lib/cjs/presets/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./presets.js"), exports);

package/lib/cjs/presets/presets.d.ts

@@ -0,0 +1,159 @@
+/**
+ * Layout Presets - Pre-built layouts yang siap pakai
+ */
+import type { NodeLike } from "../system/contracts.js";
+export interface BlogPostPresetProps {
+    title: NodeLike;
+    meta: NodeLike;
+    content: NodeLike;
+    sidebar?: NodeLike;
+    maxWidth?: number;
+}
+export declare function BlogPostPreset({ title, meta, content, sidebar, maxWidth }: BlogPostPresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};
+export interface BlogListPresetProps {
+    posts: NodeLike[];
+    sidebar?: NodeLike;
+    columns?: number;
+}
+export declare function BlogListPreset({ posts, sidebar, columns }: BlogListPresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};
+export interface ProductGridPresetProps {
+    products: NodeLike[];
+    columns?: number;
+}
+export declare function ProductGridPreset({ products, columns }: ProductGridPresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};
+export interface ProductDetailPresetProps {
+    image: NodeLike;
+    title: NodeLike;
+    price: NodeLike;
+    description: NodeLike;
+    actions: NodeLike;
+    specs?: NodeLike;
+}
+export declare function ProductDetailPreset({ image, title, price, description, actions, specs }: ProductDetailPresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};
+export interface CartPresetProps {
+    items: NodeLike;
+    summary: NodeLike;
+}
+export declare function CartPreset({ items, summary }: CartPresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};
+export interface StatsGridPresetProps {
+    stats: NodeLike[];
+    columns?: number;
+}
+export declare function StatsGridPreset({ stats, columns }: StatsGridPresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};
+export interface DataTablePresetProps {
+    headers: NodeLike;
+    rows: NodeLike[];
+    pagination?: NodeLike;
+}
+export declare function DataTablePreset({ headers, rows, pagination }: DataTablePresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};
+export interface DashboardWidgetPresetProps {
+    title: NodeLike;
+    content: NodeLike;
+    action?: NodeLike;
+}
+export declare function DashboardWidgetPreset({ title, content, action }: DashboardWidgetPresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};
+export interface SettingsPagePresetProps {
+    sidebar: NodeLike;
+    content: NodeLike;
+}
+export declare function SettingsPagePreset({ sidebar, content }: SettingsPagePresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};
+export interface SettingsSectionPresetProps {
+    title: NodeLike;
+    description?: NodeLike;
+    children: NodeLike;
+}
+export declare function SettingsSectionPreset({ title, description, children }: SettingsSectionPresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};
+export interface DocsPagePresetProps {
+    nav: NodeLike;
+    content: NodeLike;
+    toc?: NodeLike;
+}
+export declare function DocsPagePreset({ nav, content, toc }: DocsPagePresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};
+export interface DocsSidebarPresetProps {
+    sections: NodeLike[];
+}
+export declare function DocsSidebarPreset({ sections }: DocsSidebarPresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};
+export interface ProfilePagePresetProps {
+    header: NodeLike;
+    tabs: NodeLike;
+    content: NodeLike;
+}
+export declare function ProfilePagePreset({ header, tabs, content }: ProfilePagePresetProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};