@damarkuncoro/layout-engine 0.1.0 → 0.1.1

package/lib/esm/patterns/LandingLayout.js

@@ -0,0 +1,39 @@
+import { Flex } from "../primitives/Flex.js";
+import { Box } from "../primitives/Box.js";
+import { Container } from "../primitives/Container.js";
+/**
+ * LandingLayout - layout untuk halaman landing page
+ * Dengan section hero, features, pricing, dan footer
+ */
+export function LandingLayout({ header, hero, features, pricing, footer, children }) {
+    return Flex({
+        direction: "column",
+        children: [
+            // Sticky header
+            header ? Box({
+                style: { position: "sticky", top: 0, zIndex: 10 },
+                children: Container({
+                    children: header
+                })
+            }) : null,
+            // Main content
+            Box({
+                children: children !== null && children !== void 0 ? children : Flex({
+                    direction: "column",
+                    children: [
+                        hero ? Box({ children: hero }) : null,
+                        features ? Box({ children: features }) : null,
+                        pricing ? Box({ children: pricing }) : null
+                    ].filter(Boolean)
+                })
+            }),
+            // Footer
+            footer ? Box({
+                children: Container({
+                    padding: 6,
+                    children: footer
+                })
+            }) : null
+        ].filter(Boolean)
+    });
+}

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

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

package/lib/esm/patterns/index.js

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

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

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

package/lib/esm/presets/index.js

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

package/lib/esm/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>;
+    };
+};

package/lib/esm/presets/presets.js

@@ -0,0 +1,214 @@
+/**
+ * Layout Presets - Pre-built layouts yang siap pakai
+ */
+import { Flex } from "../primitives/Flex.js";
+import { Box } from "../primitives/Box.js";
+import { Grid } from "../primitives/Grid.js";
+import { Container } from "../primitives/Container.js";
+export function BlogPostPreset({ title, meta, content, sidebar, maxWidth = 800 }) {
+    if (sidebar) {
+        return Flex({
+            gap: 6,
+            children: [
+                Box({
+                    width: maxWidth,
+                    children: Flex({
+                        direction: "column",
+                        gap: 4,
+                        children: [
+                            Box({ children: title }),
+                            Box({ children: meta }),
+                            Box({ children: content })
+                        ]
+                    })
+                }),
+                Box({
+                    style: { width: "300px", flexShrink: 0 },
+                    children: sidebar
+                })
+            ]
+        });
+    }
+    return Container({
+        maxWidth,
+        children: Flex({
+            direction: "column",
+            gap: 4,
+            children: [
+                Box({ children: title }),
+                Box({ children: meta }),
+                Box({ children: content })
+            ]
+        })
+    });
+}
+export function BlogListPreset({ posts, sidebar, columns = 2 }) {
+    return Flex({
+        gap: 6,
+        children: [
+            Grid({
+                columns,
+                gap: 4,
+                children: posts
+            }),
+            sidebar ? Box({
+                style: { width: "280px", flexShrink: 0 },
+                children: sidebar
+            }) : null
+        ].filter(Boolean)
+    });
+}
+export function ProductGridPreset({ products, columns = 3 }) {
+    return Grid({
+        columns,
+        gap: 4,
+        children: products
+    });
+}
+export function ProductDetailPreset({ image, title, price, description, actions, specs }) {
+    return Flex({
+        gap: 6,
+        children: [
+            Box({
+                style: { flex: "0 0 50%" },
+                children: image
+            }),
+            Box({
+                children: Flex({
+                    direction: "column",
+                    gap: 4,
+                    children: [
+                        Box({ children: title }),
+                        Box({ children: price }),
+                        Box({ children: description }),
+                        Box({ children: actions }),
+                        specs ? Box({ children: specs }) : null
+                    ].filter(Boolean)
+                })
+            })
+        ]
+    });
+}
+export function CartPreset({ items, summary }) {
+    return Flex({
+        gap: 6,
+        children: [
+            Box({
+                style: { flex: 1 },
+                children: items
+            }),
+            Box({
+                style: { width: "320px", flexShrink: 0 },
+                children: summary
+            })
+        ]
+    });
+}
+export function StatsGridPreset({ stats, columns = 4 }) {
+    return Grid({
+        columns,
+        gap: 4,
+        children: stats
+    });
+}
+export function DataTablePreset({ headers, rows, pagination }) {
+    return Flex({
+        direction: "column",
+        gap: 4,
+        children: [
+            Box({
+                style: { overflowX: "auto" },
+                children: Flex({
+                    direction: "column",
+                    children: [
+                        Box({ children: headers }),
+                        ...rows,
+                        pagination ? Box({ children: pagination }) : null
+                    ].filter(Boolean)
+                })
+            })
+        ]
+    });
+}
+export function DashboardWidgetPreset({ title, content, action }) {
+    return Box({
+        children: Flex({
+            direction: "column",
+            gap: 3,
+            children: [
+                Flex({
+                    justify: "space-between",
+                    align: "center",
+                    children: [
+                        Box({ children: title }),
+                        action ? Box({ children: action }) : null
+                    ].filter(Boolean)
+                }),
+                Box({ children: content })
+            ]
+        })
+    });
+}
+export function SettingsPagePreset({ sidebar, content }) {
+    return Flex({
+        gap: 6,
+        children: [
+            Box({
+                style: { width: "250px", flexShrink: 0 },
+                children: sidebar
+            }),
+            Box({
+                style: { flex: 1 },
+                children: content
+            })
+        ]
+    });
+}
+export function SettingsSectionPreset({ title, description, children }) {
+    return Flex({
+        direction: "column",
+        gap: 4,
+        children: [
+            Box({ children: title }),
+            description ? Box({ children: description }) : null,
+            Box({ children: children })
+        ].filter(Boolean)
+    });
+}
+export function DocsPagePreset({ nav, content, toc }) {
+    return Flex({
+        gap: 6,
+        children: [
+            Box({
+                style: { width: "240px", flexShrink: 0 },
+                children: nav
+            }),
+            Box({
+                style: { flex: 1, minWidth: 0 },
+                children: content
+            }),
+            toc ? Box({
+                style: { width: "200px", flexShrink: 0 },
+                children: toc
+            }) : null
+        ].filter(Boolean)
+    });
+}
+export function DocsSidebarPreset({ sections }) {
+    return Flex({
+        direction: "column",
+        gap: 3,
+        children: sections
+    });
+}
+export function ProfilePagePreset({ header, tabs, content }) {
+    return Flex({
+        direction: "column",
+        gap: 4,
+        children: [
+            Box({ children: header }),
+            Box({ children: tabs }),
+            Box({ children: content })
+        ]
+    });
+}

package/lib/esm/primitives/Box.d.ts

@@ -0,0 +1,15 @@
+import type { LayoutProps } from "../system/types.js";
+export { type LayoutProps };
+/**
+ * Komponen blok dasar yang memetakan LayoutProps → inline style.
+ * Gunakan untuk membangun primitive lainnya.
+ */
+export declare function Box({ children, padding, margin, width, height, display, style, ...rest }: LayoutProps & {
+    children?: any;
+}): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/lib/esm/primitives/Center.d.ts

@@ -0,0 +1,10 @@
+import type { LayoutProps } from "../system/types.js";
+export declare function Center(props: LayoutProps & {
+    children?: any;
+}): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/lib/esm/primitives/Center.js

@@ -0,0 +1,4 @@
+import { Flex } from "./Flex.js";
+export function Center(props) {
+    return Flex({ justify: "center", align: "center", ...props });
+}

package/lib/esm/primitives/Container.d.ts

@@ -0,0 +1,17 @@
+import type { LayoutProps, CSSLength } from "../system/types.js";
+export interface ContainerProps extends LayoutProps {
+    maxWidth?: CSSLength;
+    centerContent?: boolean;
+}
+/**
+ * Container - wrapper dengan max-width dan centering
+ */
+export declare function Container({ children, maxWidth, centerContent, padding, margin, width, height, display, style, ...rest }: ContainerProps & {
+    children?: any;
+}): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/lib/esm/primitives/Container.js

@@ -0,0 +1,24 @@
+import { normalizeUnit } from "../core/styleResolver.js";
+/**
+ * Container - wrapper dengan max-width dan centering
+ */
+export function Container({ children, maxWidth = 1280, centerContent = true, padding = 4, margin, width, height, display, style, ...rest }) {
+    const resolved = {
+        padding: normalizeUnit(padding),
+        margin: margin ? normalizeUnit(margin) : "0 auto",
+        width: width !== null && width !== void 0 ? width : "100%",
+        height: normalizeUnit(height),
+        maxWidth: normalizeUnit(maxWidth),
+        display: display !== null && display !== void 0 ? display : "block",
+        ...(centerContent && { marginLeft: "auto", marginRight: "auto" }),
+        ...style
+    };
+    return {
+        type: "div",
+        props: {
+            style: resolved,
+            ...rest,
+            children
+        }
+    };
+}

package/lib/esm/primitives/Flex.d.ts

@@ -0,0 +1,20 @@
+import type { LayoutProps, CSSLength } from "../system/types.js";
+export interface FlexProps extends LayoutProps {
+    justify?: string;
+    align?: string;
+    gap?: CSSLength;
+    direction?: "row" | "row-reverse" | "column" | "column-reverse";
+}
+/**
+ * Kontainer fleksibel berbasis style inline (tanpa dependency React).
+ * Menghasilkan struktur objek yang merepresentasikan node 'div' dengan style flex.
+ */
+export declare function Flex({ children, justify, align, gap, direction, padding, margin, width, height, display, style, ...rest }: FlexProps & {
+    children?: any;
+}): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/lib/esm/primitives/Grid.d.ts

@@ -0,0 +1,16 @@
+import type { CSSLength, LayoutProps, ResponsiveValue } from "../system/types.js";
+export interface GridProps extends LayoutProps {
+    columns?: number | string | ResponsiveValue<number>;
+    rows?: number | string;
+    gap?: CSSLength | ResponsiveValue<CSSLength>;
+    viewportWidth?: number;
+}
+export declare function Grid({ children, columns, rows, gap, padding, margin, width, height, display, style, viewportWidth, ...rest }: GridProps & {
+    children?: any;
+}): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/{dist → lib/esm}/primitives/Grid.js

@@ -1,19 +1,26 @@
 import { normalizeUnit } from "../core/styleResolver.js";
+import { resolveResponsive } from "../core/responsiveSystem.js";
 const toTemplate = (v) => {
     if (typeof v === "number")
         return `repeat(${v}, minmax(0, 1fr))`;
     return v;
 };
-export function Grid({ children, columns, rows, gap, padding, margin, width, height, display, style, ...rest }) {
+export function Grid({ children, columns, rows, gap, padding, margin, width, height, display, style, viewportWidth = 1024, ...rest }) {
+    const resolvedColumns = typeof columns === "object"
+        ? resolveResponsive(columns, viewportWidth)
+        : toTemplate(columns);
+    const resolvedGap = typeof gap === "object"
+        ? normalizeUnit(resolveResponsive(gap, viewportWidth))
+        : normalizeUnit(gap);
     const resolved = {
         padding: normalizeUnit(padding),
         margin: normalizeUnit(margin),
         width: normalizeUnit(width),
         height: normalizeUnit(height),
         display: display !== null && display !== void 0 ? display : "grid",
-        gridTemplateColumns: toTemplate(columns),
+        gridTemplateColumns: resolvedColumns,
         gridTemplateRows: toTemplate(rows),
-        gap: normalizeUnit(gap),
+        gap: resolvedGap,
         ...style
     };
     return {

package/lib/esm/primitives/Spacer.d.ts

@@ -0,0 +1,19 @@
+import type { LayoutProps, CSSLength } from "../system/types.js";
+export interface SpacerProps extends LayoutProps {
+    size?: CSSLength;
+    axis?: "x" | "y";
+}
+export declare function Spacer({ size, axis, style, ...rest }: SpacerProps & {
+    children?: any;
+}): {
+    type: string;
+    props: {
+        padding?: CSSLength;
+        margin?: CSSLength;
+        width?: CSSLength;
+        height?: CSSLength;
+        display?: string;
+        children?: any;
+        style: Record<string, any>;
+    };
+};

package/lib/esm/primitives/Spacer.js

@@ -0,0 +1,17 @@
+import { normalizeUnit } from "../core/styleResolver.js";
+export function Spacer({ size = 8, axis = "y", style, ...rest }) {
+    var _a, _b;
+    const resolved = {
+        width: axis === "x" ? normalizeUnit(size) : (_a = normalizeUnit(rest.width)) !== null && _a !== void 0 ? _a : "100%",
+        height: axis === "y" ? normalizeUnit(size) : (_b = normalizeUnit(rest.height)) !== null && _b !== void 0 ? _b : "100%",
+        display: "block",
+        ...style
+    };
+    return {
+        type: "div",
+        props: {
+            style: resolved,
+            ...rest
+        }
+    };
+}

package/lib/esm/primitives/Stack.d.ts

@@ -0,0 +1,13 @@
+import type { CSSLength, LayoutProps } from "../system/types.js";
+export interface StackProps extends LayoutProps {
+    gap?: CSSLength;
+}
+export declare function Stack({ children, gap, padding, margin, width, height, display, style, ...rest }: StackProps & {
+    children?: any;
+}): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/lib/esm/primitives/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./Box.js";
+export * from "./Flex.js";
+export * from "./Grid.js";
+export * from "./Stack.js";
+export * from "./Container.js";
+export * from "./Spacer.js";
+export * from "./Center.js";

package/lib/esm/primitives/index.js

@@ -0,0 +1,7 @@
+export * from "./Box.js";
+export * from "./Flex.js";
+export * from "./Grid.js";
+export * from "./Stack.js";
+export * from "./Container.js";
+export * from "./Spacer.js";
+export * from "./Center.js";

package/lib/esm/structures/HeaderContentFooter.d.ts

@@ -0,0 +1,13 @@
+import type { NodeLike } from "../system/contracts.js";
+export interface HeaderContentFooterContract {
+    header: NodeLike;
+    content: NodeLike;
+    footer: NodeLike;
+}
+export declare function HeaderContentFooter({ header, content, footer }: HeaderContentFooterContract): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/lib/esm/structures/HeaderContentFooter.js

@@ -0,0 +1,7 @@
+import { Flex } from "../primitives/Flex.js";
+export function HeaderContentFooter({ header, content, footer }) {
+    return Flex({
+        direction: "column",
+        children: [header, content, footer]
+    });
+}

package/lib/esm/structures/HeaderLayout.d.ts

@@ -0,0 +1,14 @@
+import type { HeaderLayoutContract } from "../system/contracts.js";
+export interface HeaderLayoutProps extends HeaderLayoutContract {
+    headerHeight?: string | number;
+}
+/**
+ * HeaderLayout - layout dengan header di atas dan content di bawah
+ */
+export declare function HeaderLayout({ header, children, headerHeight }: HeaderLayoutProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};