@arkcit/engine-react 0.3.0

package/dist/rendering.js

@@ -0,0 +1,582 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/rendering/finalizeRenderedNode.tsx
+import React2 from "react";
+
+// src/rendering/previewLinkBehavior.ts
+var configurePreviewLinkBehavior = (componentProps) => {
+  const existingOnClick = componentProps.onClick;
+  componentProps.onClick = (event) => {
+    event.preventDefault();
+    if (typeof existingOnClick === "function") {
+      existingOnClick(event);
+    }
+  };
+};
+
+// src/materialization/materializeBoundTable.tsx
+import React from "react";
+
+// src/rendering/resolveBoundTableData.ts
+var resolveBoundTableData = ({
+  nodeId,
+  componentProps,
+  runtime
+}) => {
+  var _a, _b, _c, _d;
+  const rows = Array.isArray(componentProps.rows) ? componentProps.rows : [];
+  const columns = Array.isArray(componentProps.columns) ? componentProps.columns : [];
+  const paginationCandidate = componentProps.pagination;
+  const pagination = paginationCandidate && typeof paginationCandidate === "object" ? paginationCandidate : null;
+  const pageRaw = Number((_a = pagination == null ? void 0 : pagination.page) != null ? _a : 1);
+  const pageSizeRaw = Number(((_b = pagination == null ? void 0 : pagination.pageSize) != null ? _b : rows.length) || 1);
+  const page = Number.isFinite(pageRaw) && pageRaw > 0 ? pageRaw : 1;
+  const pageSize = Number.isFinite(pageSizeRaw) && pageSizeRaw > 0 ? pageSizeRaw : rows.length || 1;
+  const tableQueriesRaw = runtime.get("table.queriesByNodeId");
+  const tableQueries = tableQueriesRaw && typeof tableQueriesRaw === "object" ? tableQueriesRaw : {};
+  const query = String((_d = (_c = tableQueries[nodeId]) != null ? _c : tableQueries.__all__) != null ? _d : "").trim().toLowerCase();
+  const filteredRows = query.length === 0 ? rows : rows.filter(
+    (row) => columns.some((column) => {
+      var _a2;
+      const key = String((_a2 = column.key) != null ? _a2 : "").trim();
+      if (!key) return false;
+      const value = row[key];
+      return String(value != null ? value : "").toLowerCase().includes(query);
+    })
+  );
+  const startIndex = (page - 1) * pageSize;
+  const pagedRows = pagination ? filteredRows.slice(startIndex, startIndex + pageSize) : filteredRows;
+  return {
+    columns,
+    rows,
+    filteredRows,
+    pagedRows,
+    pagination,
+    page,
+    pageSize,
+    query
+  };
+};
+
+// src/materialization/materializeBoundTable.tsx
+var RENDER_INTERNAL_PROP_NAMES = /* @__PURE__ */ new Set([
+  "bindingEnabled",
+  "valueBindingKey",
+  "optionsBindingKey",
+  "useBindingData",
+  "entitiesBindingKey",
+  "videoBindingKey",
+  "mapBindingKey",
+  "productBindingKey",
+  "useTranslationKeys",
+  "tagContentTranslationKey",
+  "tagContentTranslationValue",
+  "hrefTranslationKey",
+  "hrefTranslationValue",
+  "mediaSource",
+  "mediaSrc",
+  "mediaAlt",
+  "rowsBindingKey",
+  "columnsBindingKey"
+]);
+var omitInternalProps = (props) => {
+  const next = __spreadValues({}, props);
+  delete next.__studio;
+  for (const propName of RENDER_INTERNAL_PROP_NAMES) {
+    delete next[propName];
+  }
+  return next;
+};
+var materializeBoundTable = ({
+  nodeId,
+  componentProps,
+  runtime,
+  TableComponent
+}) => {
+  const { columns, pagedRows } = resolveBoundTableData({
+    nodeId,
+    componentProps,
+    runtime
+  });
+  delete componentProps.rows;
+  delete componentProps.columns;
+  delete componentProps.pagination;
+  delete componentProps.rowsBindingKey;
+  delete componentProps.columnsBindingKey;
+  delete componentProps.useBindingData;
+  if (columns.length === 0) return null;
+  delete componentProps.children;
+  const headerNode = React.createElement(
+    TableComponent.Header,
+    null,
+    React.createElement(
+      TableComponent.Row,
+      null,
+      ...columns.map(
+        (column, columnIndex) => {
+          var _a, _b, _c;
+          return React.createElement(
+            TableComponent.Head,
+            { key: `table-head-${String((_a = column.key) != null ? _a : columnIndex)}` },
+            String((_c = (_b = column.header) != null ? _b : column.key) != null ? _c : `Column ${columnIndex + 1}`)
+          );
+        }
+      )
+    )
+  );
+  const bodyNode = React.createElement(
+    TableComponent.Body,
+    null,
+    ...pagedRows.map(
+      (row, rowIndex) => {
+        var _a;
+        return React.createElement(
+          TableComponent.Row,
+          { key: `table-row-${String((_a = row.id) != null ? _a : rowIndex)}` },
+          ...columns.map((column, columnIndex) => {
+            var _a2, _b;
+            const key = String((_a2 = column.key) != null ? _a2 : "").trim();
+            const value = key ? row[key] : "";
+            return React.createElement(
+              TableComponent.Cell,
+              { key: `table-cell-${String((_b = row.id) != null ? _b : rowIndex)}-${key || columnIndex}` },
+              value == null ? "" : String(value)
+            );
+          })
+        );
+      }
+    )
+  );
+  return React.createElement(
+    TableComponent,
+    omitInternalProps(componentProps),
+    headerNode,
+    bodyNode
+  );
+};
+
+// src/rendering/finalizeRenderedNode.tsx
+var finalizeRenderedNode = ({
+  node,
+  children,
+  componentProps,
+  registryComponent,
+  runtime,
+  isStudioRendererContext,
+  studioSizing,
+  plans: providedPlans,
+  dependencies
+}) => {
+  const plans = providedPlans != null ? providedPlans : dependencies.resolveFinalRenderPlan({
+    node,
+    componentProps,
+    isStudioRendererContext,
+    studioSizing
+  });
+  for (const plan of plans) {
+    if (plan.kind === "style-sizing") {
+      componentProps.style = plan.style;
+    }
+    if (plan.kind === "configure-studio-link") {
+      configurePreviewLinkBehavior(componentProps);
+    }
+    if (plan.kind === "cleanup-studio-props") {
+      delete componentProps.__studioColSpan;
+      delete componentProps.__studioWrapperClassName;
+      delete componentProps.__studioWidthPct;
+      delete componentProps.__studioHeightPct;
+      delete componentProps.__studioHeightPx;
+      delete componentProps.__studioCardSection;
+      delete componentProps.layout;
+    }
+  }
+  if (plans.some((plan) => plan.kind === "table-fallback")) {
+    const tableNode = materializeBoundTable({
+      nodeId: node.id,
+      componentProps,
+      runtime,
+      TableComponent: registryComponent
+    });
+    if (tableNode) {
+      return tableNode;
+    }
+  }
+  const finalComponentProps = dependencies.omitStudioProps(componentProps);
+  if (children && children.length > 0) {
+    if (node.type === "Cover" || node.type === "Tabs" || node.type === "Accordion") {
+      return React2.createElement(registryComponent, finalComponentProps);
+    }
+    return React2.createElement(registryComponent, finalComponentProps, children);
+  }
+  return React2.createElement(registryComponent, finalComponentProps);
+};
+
+// src/rendering/gridItemWrapperProps.ts
+var getGridItemWrapperProps = (colSpan) => ({
+  className: "w-full min-w-0",
+  style: {
+    gridColumn: `span ${colSpan} / span ${colSpan}`
+  }
+});
+
+// src/rendering/nodeResetToken.ts
+import { isValidElement } from "react";
+var buildNodeResetToken = (node) => {
+  var _a, _b, _c, _d, _e, _f;
+  const seen = /* @__PURE__ */ new WeakSet();
+  try {
+    return JSON.stringify(
+      {
+        type: node.type,
+        props: (_a = node.props) != null ? _a : null,
+        events: (_b = node.events) != null ? _b : null,
+        children: (_d = (_c = node.children) == null ? void 0 : _c.map((child) => child.id)) != null ? _d : []
+      },
+      (_key, value) => {
+        if (typeof value === "function") return "[function]";
+        if (isValidElement(value)) return "[react-element]";
+        if (value && typeof value === "object") {
+          if (seen.has(value)) return "[circular]";
+          seen.add(value);
+        }
+        return value;
+      }
+    );
+  } catch (e) {
+    return `${node.type}:${node.id}:${Object.keys((_e = node.props) != null ? _e : {}).join(",")}:${((_f = node.children) != null ? _f : []).map((child) => child.id).join(",")}`;
+  }
+};
+
+// src/rendering/prepareRenderableChildren.tsx
+import React4 from "react";
+import {
+  resolveChildContentDescriptor,
+  resolveChildDescriptors
+} from "@arkcit/engine-render-layer";
+
+// src/materialization/materializeChildContent.tsx
+import React3 from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var materializeChildContent = ({
+  descriptor,
+  renderSafeNode
+}) => {
+  if (descriptor.kind === "empty") {
+    return null;
+  }
+  const renderDescriptor = (childDescriptor) => {
+    if (childDescriptor.kind === "grid-item") {
+      return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(childDescriptor.colSpan)), { children: renderSafeNode(childDescriptor.child) }), childDescriptor.child.id);
+    }
+    return /* @__PURE__ */ jsx(React3.Fragment, { children: renderSafeNode(childDescriptor.child) }, childDescriptor.child.id);
+  };
+  if (descriptor.kind === "single") {
+    return renderDescriptor(descriptor.child);
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: descriptor.children.map(renderDescriptor) });
+};
+
+// src/rendering/prepareRenderableChildren.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var prepareRenderableChildren = ({
+  node,
+  internalStudioNodeTypes,
+  renderSafeNode,
+  childDescriptors,
+  childContentDescriptor
+}) => {
+  const resolvedDescriptors = childDescriptors != null ? childDescriptors : resolveChildDescriptors({
+    node,
+    internalStudioNodeTypes
+  });
+  const children = resolvedDescriptors.map((descriptor) => {
+    if (descriptor.kind === "grid-item") {
+      return /* @__PURE__ */ jsx2("div", __spreadProps(__spreadValues({}, getGridItemWrapperProps(descriptor.colSpan)), { children: renderSafeNode(descriptor.child) }), descriptor.child.id);
+    }
+    return /* @__PURE__ */ jsx2(React4.Fragment, { children: renderSafeNode(descriptor.child) }, descriptor.child.id);
+  });
+  const resolvedChildContentDescriptor = childContentDescriptor != null ? childContentDescriptor : resolveChildContentDescriptor({
+    childDescriptors: resolvedDescriptors
+  });
+  const resolvedChildContent = materializeChildContent({
+    descriptor: resolvedChildContentDescriptor,
+    renderSafeNode
+  });
+  return {
+    children,
+    resolvedChildContent,
+    childDescriptors: resolvedDescriptors,
+    childContentDescriptor: resolvedChildContentDescriptor
+  };
+};
+
+// src/rendering/renderChildren.tsx
+import React5, { isValidElement as isValidElement2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var toBoolean = (value) => {
+  if (typeof value === "boolean") return value;
+  if (typeof value === "string") return value.toLowerCase() === "true";
+  return false;
+};
+var normalizeRenderableChild = (value) => {
+  if (value == null || typeof value === "boolean") return null;
+  if (typeof value === "string" || typeof value === "number") return value;
+  if (isValidElement2(value)) return value;
+  if (Array.isArray(value)) {
+    return value.map((item, index) => /* @__PURE__ */ jsx3(React5.Fragment, { children: normalizeRenderableChild(item) }, `normalized-child-${index}`));
+  }
+  if (value && typeof value === "object") {
+    const candidate = value;
+    if ("props" in candidate && candidate.props && typeof candidate.props === "object") {
+      const nestedChildren = candidate.props.children;
+      return normalizeRenderableChild(nestedChildren);
+    }
+  }
+  return null;
+};
+
+// src/engine/EngineWarningFallback.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var EngineWarningFallback = ({ message }) => /* @__PURE__ */ jsx4(
+  "div",
+  {
+    role: "alert",
+    className: "rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-900",
+    children: message
+  }
+);
+var EngineWarningFallback_default = EngineWarningFallback;
+
+// src/rendering/resolveResolvedReactNode.ts
+import {
+  resolveResolvedNode
+} from "@arkcit/engine-render-layer";
+var resolveResolvedReactNode = ({
+  node,
+  runtime,
+  registry,
+  internalStudioNodeTypes,
+  renderSafeNode,
+  isStudioRendererContext,
+  studioSizing
+}) => {
+  const registryEntry = registry[node.type];
+  if (!registryEntry) {
+    return null;
+  }
+  const resolvedNode = resolveResolvedNode({
+    node,
+    runtime,
+    internalStudioNodeTypes,
+    isStudioRendererContext,
+    studioSizing
+  });
+  const { children, resolvedChildContent } = prepareRenderableChildren({
+    node,
+    internalStudioNodeTypes,
+    renderSafeNode,
+    childDescriptors: resolvedNode.childDescriptors,
+    childContentDescriptor: resolvedNode.childContentDescriptor
+  });
+  return __spreadProps(__spreadValues({}, resolvedNode), {
+    registryEntry,
+    children,
+    resolvedChildContent
+  });
+};
+
+// src/rendering/renderReactNode.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var renderReactNode = ({
+  node,
+  runtime,
+  registry,
+  schemaNodes,
+  renderSafeNode,
+  internalStudioNodeTypes,
+  overlaysByNodeId,
+  onInlineTextEdit,
+  isStudioRendererContext,
+  dropdownOpenByNodeId,
+  setDropdownOpenByNodeId,
+  captureFieldFocus,
+  selectedNodeId,
+  wizardActiveStepByNodeId,
+  accordionOpenIdsByNodeId,
+  expandablePanelOpenByNodeId,
+  setWizardActiveStepByNodeId,
+  setAccordionOpenIdsByNodeId,
+  setExpandablePanelOpenByNodeId,
+  onNodeClick,
+  setInlineEditing,
+  studioSizing,
+  dependencies
+}) => {
+  try {
+    const resolvedNode = resolveResolvedReactNode({
+      node,
+      runtime,
+      registry,
+      internalStudioNodeTypes,
+      renderSafeNode,
+      isStudioRendererContext,
+      studioSizing
+    });
+    if (!resolvedNode) {
+      return /* @__PURE__ */ jsx5(
+        EngineWarningFallback_default,
+        {
+          message: `Unknown component type "${node.type}" for node "${node.id}".`
+        }
+      );
+    }
+    const {
+      registryEntry,
+      componentProps,
+      renderBindingProps,
+      children,
+      resolvedChildContent,
+      contentPlans,
+      navigationPlans,
+      renderDirectivePlans,
+      finalRenderPlans
+    } = resolvedNode;
+    dependencies.applyStudioOverlayComponentProps({
+      node,
+      componentProps,
+      runtime,
+      overlaysByNodeId,
+      renderBindingProps,
+      resolvedChildContent,
+      onInlineTextEdit,
+      isStudioRendererContext,
+      dropdownOpenByNodeId,
+      setDropdownOpenByNodeId
+    });
+    const contentNode = dependencies.applyContentComposition({
+      node,
+      componentProps,
+      isStudioRendererContext,
+      internalStudioNodeTypes,
+      schemaNodes,
+      onInlineTextEdit,
+      captureFieldFocus,
+      renderSafeNode,
+      normalizeRenderableChild: dependencies.normalizeRenderableChild,
+      findNodeById: dependencies.findNodeById,
+      runtime,
+      plans: contentPlans
+    });
+    if (contentNode) {
+      return contentNode;
+    }
+    dependencies.applyRenderDirectives({
+      node,
+      componentProps,
+      renderBindingProps,
+      runtime,
+      plans: renderDirectivePlans
+    });
+    dependencies.applyNavigationComposition({
+      node,
+      componentProps,
+      isStudioRendererContext,
+      selectedNodeId: selectedNodeId != null ? selectedNodeId : null,
+      wizardActiveStepByNodeId,
+      accordionOpenIdsByNodeId,
+      expandablePanelOpenByNodeId,
+      runtime,
+      setWizardActiveStepByNodeId,
+      setAccordionOpenIdsByNodeId,
+      setExpandablePanelOpenByNodeId,
+      onNodeClick,
+      onInlineTextEdit,
+      renderSafeNode,
+      normalizeRenderableChild: dependencies.normalizeRenderableChild,
+      captureFieldFocus,
+      setInlineEditing,
+      internalStudioNodeTypes,
+      plans: navigationPlans
+    });
+    return dependencies.finalizeRenderedNode({
+      node,
+      children,
+      componentProps,
+      registryComponent: registryEntry.Component,
+      runtime,
+      isStudioRendererContext,
+      studioSizing,
+      plans: finalRenderPlans
+    });
+  } catch (e) {
+    return /* @__PURE__ */ jsx5(
+      EngineWarningFallback_default,
+      {
+        message: `Renderer fallback: node "${node.type}" (${node.id}) could not be resolved.`
+      }
+    );
+  }
+};
+
+// src/rendering/resolveReactNodePlan.ts
+import { resolveNodeBase } from "@arkcit/engine-render-layer";
+var resolveReactNodePlan = ({
+  node,
+  runtime,
+  registry,
+  internalStudioNodeTypes,
+  renderSafeNode
+}) => {
+  const registryEntry = registry[node.type];
+  if (!registryEntry) {
+    return null;
+  }
+  const resolvedNodeBase = resolveNodeBase({
+    node,
+    runtime,
+    internalStudioNodeTypes
+  });
+  const { children, resolvedChildContent } = prepareRenderableChildren({
+    node,
+    internalStudioNodeTypes,
+    renderSafeNode,
+    childDescriptors: resolvedNodeBase.childDescriptors,
+    childContentDescriptor: resolvedNodeBase.childContentDescriptor
+  });
+  return __spreadProps(__spreadValues({}, resolvedNodeBase), {
+    registryEntry,
+    children,
+    resolvedChildContent
+  });
+};
+export {
+  buildNodeResetToken,
+  configurePreviewLinkBehavior,
+  finalizeRenderedNode,
+  getGridItemWrapperProps,
+  normalizeRenderableChild,
+  prepareRenderableChildren,
+  renderReactNode,
+  resolveBoundTableData,
+  resolveReactNodePlan,
+  resolveResolvedReactNode,
+  toBoolean
+};

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@arkcit/engine-react",
+  "private": false,
+  "version": "0.3.0",
+  "type": "module",
+  "sideEffects": false,
+  "description": "React-specific renderer package for the Arkcit engine platform.",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Arkcit/engine-react.git"
+  },
+  "homepage": "https://github.com/Arkcit/engine-react",
+  "bugs": {
+    "url": "https://github.com/Arkcit/engine-react/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./engine": {
+      "types": "./dist/engine.d.ts",
+      "import": "./dist/engine.js",
+      "default": "./dist/engine.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks.d.ts",
+      "import": "./dist/hooks.js",
+      "default": "./dist/hooks.js"
+    },
+    "./composition": {
+      "types": "./dist/composition.d.ts",
+      "import": "./dist/composition.js",
+      "default": "./dist/composition.js"
+    },
+    "./directives": {
+      "types": "./dist/directives.d.ts",
+      "import": "./dist/directives.js",
+      "default": "./dist/directives.js"
+    },
+    "./materialization": {
+      "types": "./dist/materialization.d.ts",
+      "import": "./dist/materialization.js",
+      "default": "./dist/materialization.js"
+    },
+    "./rendering": {
+      "types": "./dist/rendering.d.ts",
+      "import": "./dist/rendering.js",
+      "default": "./dist/rendering.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup --config tsup.config.ts",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test:smoke": "node tests/run-all.mjs",
+    "test:unit": "node --import tsx --test tests/*.test.ts tests/*.test.tsx",
+    "test:coverage": "node --import tsx --test --experimental-test-coverage --test-coverage-include=\"src/**\" tests/*.test.ts tests/*.test.tsx",
+    "test": "npm run test:smoke && npm run test:unit"
+  },
+  "dependencies": {
+    "@arkcit/engine-core": "^0.3.0",
+    "@arkcit/engine-render-layer": "^0.3.0",
+    "@arkcit/engine-runtime": "^0.3.0",
+    "@arkcit/engine-schema": "^0.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "tsx": "^4.20.6",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}