robobyte-front-builder 1.0.19 → 1.0.23

package/src/services/builderHelper/builderHelper.js

@@ -61,6 +61,51 @@ function cloneNode(node) {
   return cloned
 }
 
+// ── System clipboard helpers (cross-tab / cross-browser) ─────────────────────
+//
+// Nodes are serialised as: { "__rbfb": 1, "node": <schema node> }
+// The sentinel lets us reject arbitrary text the user may have copied elsewhere.
+//
+// writeNodeToClipboard — async, silently swallows permission errors
+// readNodeFromClipboard — async, returns node object or null
+//
+const RBFB_MARKER = '__rbfb'
+
+/**
+ * Serialise a builder node and write it to the system clipboard.
+ * Safe to call fire-and-forget: never throws.
+ */
+export function writeNodeToClipboard(node) {
+  if (!navigator?.clipboard?.writeText) return Promise.resolve()
+  return navigator.clipboard
+    .writeText(JSON.stringify({ [RBFB_MARKER]: 1, node }))
+    .catch(() => {}) // permission denied or insecure context — ignore silently
+}
+
+/**
+ * Read a builder node from the system clipboard.
+ * Returns the raw node object if the clipboard contains valid builder JSON,
+ * or null for any other content / permission denial.
+ */
+export async function readNodeFromClipboard() {
+  if (!navigator?.clipboard?.readText) return null
+  try {
+    const text = await navigator.clipboard.readText()
+    const obj  = JSON.parse(text)
+    if (obj && obj[RBFB_MARKER] === 1 && obj.node && typeof obj.node === 'object') {
+      return obj.node
+    }
+  } catch {} // SyntaxError, NotAllowedError, etc.
+  return null
+}
+
+// ── Container types — paste-as-child targets ───────────────────────────────
+export const CONTAINER_TYPES = new Set([
+  'container', 'card',
+  'wizard', 'wizard-step', 'repeater',
+  'widget', 'layout', 'layout-cell', 'dialog'
+])
+
 export function duplicateInTree(node, targetId) {
   if (!node.children) return node
 
@@ -82,6 +127,53 @@ export function duplicateInTree(node, targetId) {
   }
 }
 
+// ── Insert newNode immediately after targetId in the tree ─────────────────
+function insertAfterInTree(node, targetId, newNode) {
+  if (!node.children) return node
+
+  const idx = node.children.findIndex(c => c.id === targetId)
+  if (idx !== -1) {
+    const next = [...node.children]
+    next.splice(idx + 1, 0, newNode)
+    return { ...node, children: next }
+  }
+
+  return {
+    ...node,
+    children: node.children.map(child => insertAfterInTree(child, targetId, newNode))
+  }
+}
+
+/**
+ * Paste a cloned copy of clipboardNode relative to targetId.
+ *
+ * - No targetId              → append as last child of root
+ * - targetId is a container  → append as last child of that container
+ * - targetId is a leaf       → insert as next sibling
+ *
+ * @param {object}  root           - Schema root node
+ * @param {string|null} targetId   - Currently selected node id (or null)
+ * @param {object}  clipboardNode  - The node that was copied
+ * @param {boolean} asChild        - Force paste-as-child even if target is a leaf
+ * @returns {object}               - New root node
+ */
+export function pasteIntoTree(root, targetId, clipboardNode, asChild = false) {
+  const newNode = cloneNode(clipboardNode)
+
+  if (!targetId) {
+    // No selection — append to root's children
+    return { ...root, children: [...(root.children ?? []), newNode] }
+  }
+
+  if (asChild) {
+    // Target is a container — insert as last child
+    return insertIntoTree(root, targetId, newNode)
+  }
+
+  // Target is a leaf — insert as next sibling
+  return insertAfterInTree(root, targetId, newNode)
+}
+
 function resolveValue(node, name, formData) {
   const expr = node.expressions?.main?.[name]
   if (expr?.type === 'js') {

package/src/services/builderHelper/colorSchema.js

@@ -0,0 +1,95 @@
+/**
+ * Shared color schema utility for KPI renderers.
+ *
+ * Supports four coloring modes for item arrays:
+ *   palette  — cycle through the global fallback palette (default)
+ *   tints    — monochromatic tints of a chosen base color
+ *   data     — only use colors that come from the data; no generated fallback
+ *   custom   — user-defined JSON array of hex / rgb strings
+ */
+
+export const DEFAULT_PALETTE = [
+  '#1976d2','#9c27b0','#e91e63','#ff9800',
+  '#4caf50','#00bcd4','#f44336','#3f51b5',
+  '#ff5722','#009688','#8bc34a','#607d8b',
+]
+
+// ── Low-level helpers ─────────────────────────────────────────────────────────
+
+export function hexToRgb(hex) {
+  const h = (hex || '').replace('#', '')
+  if (h.length < 6) return [0, 0, 0]
+  return [
+    parseInt(h.slice(0, 2), 16),
+    parseInt(h.slice(2, 4), 16),
+    parseInt(h.slice(4, 6), 16),
+  ]
+}
+
+/**
+ * Generate `count` tint variants — from 100 % saturation → ~38 % (mixed with white).
+ */
+export function generateTints(baseHex, count = 8) {
+  try {
+    const [r, g, b] = hexToRgb(baseHex)
+    return Array.from({ length: count }, (_, i) => {
+      const t = count === 1 ? 0 : (i * 0.62) / (count - 1)
+      const mix = v => Math.round(v + (255 - v) * t)
+      return `rgb(${mix(r)},${mix(g)},${mix(b)})`
+    })
+  } catch {
+    return DEFAULT_PALETTE.slice(0, count)
+  }
+}
+
+// ── Public API ────────────────────────────────────────────────────────────────
+
+/**
+ * Resolve a colorSchema config object into an ordered color array for `count` items.
+ *
+ * Returns `null` for 'data' mode — the caller should skip generated colors entirely
+ * and rely solely on per-item data colors.
+ *
+ * @param {object|null} schema   { mode, color, customColors }
+ * @param {number}      count    Number of items (used for tint generation)
+ * @param {string[]}    palette  Fallback palette (defaults to DEFAULT_PALETTE)
+ * @returns {string[]|null}
+ */
+export function resolveColorSchema(schema, count = 8, palette = DEFAULT_PALETTE) {
+  const mode = schema?.mode || 'palette'
+
+  if (mode === 'tints' && schema?.color) {
+    return generateTints(schema.color, count)
+  }
+
+  if (mode === 'custom') {
+    try {
+      const arr = JSON.parse(schema?.customColors || '[]')
+      if (Array.isArray(arr) && arr.length) return arr
+    } catch { /* fall through */ }
+    return palette
+  }
+
+  if (mode === 'data') return null   // no generated fallback
+
+  return palette   // 'palette' or unknown
+}
+
+/**
+ * Get the final color for a single item.
+ *
+ * Priority: dataColor (from data field) → schema-derived color.
+ *
+ * @param {object|null} schema     colorSchema config
+ * @param {number}      index      Item index (for cycling)
+ * @param {string|null} dataColor  Color already extracted from the data item
+ * @param {number}      total      Total item count
+ * @param {string[]}    palette    Fallback palette
+ * @returns {string|undefined}
+ */
+export function schemaColor(schema, index, dataColor, total, palette = DEFAULT_PALETTE) {
+  if (dataColor) return dataColor
+  const colors = resolveColorSchema(schema, total, palette)
+  if (!colors) return undefined   // 'data' mode, no data color available
+  return colors[index % colors.length]
+}

package/src/services/builderHelper/iconResolver.js

@@ -0,0 +1,50 @@
+/**
+ * Resolves a string to an MUI @mui/icons-material component.
+ *
+ * Strategy: lazy-load the entire icons barrel once on first call (tree-shaking
+ * doesn't help for a dynamic lookup anyway), then cache for the lifetime of
+ * the session.  Returns null when the name isn't a known icon.
+ *
+ * Usage:
+ *   const Icon = resolveIcon('SearchOutlined')   // → React component or null
+ *   const isIcon = isIconName('SearchOutlined')  // → true
+ *   const isIcon = isIconName('$')               // → false
+ */
+
+let _iconModule = null
+
+function getIconModule() {
+  if (!_iconModule) {
+    try {
+      // eslint-disable-next-line global-require
+      _iconModule = require('@mui/icons-material')
+    } catch {
+      _iconModule = {}
+    }
+  }
+  return _iconModule
+}
+
+/**
+ * Returns the MUI icon component for `name`, or null if not found.
+ * @param {string|null|undefined} name
+ * @returns {React.ComponentType|null}
+ */
+export function resolveIcon(name) {
+  if (!name || typeof name !== 'string') return null
+  const icons = getIconModule()
+  return icons[name] ?? null
+}
+
+/**
+ * Returns true if `value` resolves to a known MUI icon component.
+ * Useful to decide whether to render an icon vs plain text in an adornment.
+ * @param {string|null|undefined} value
+ * @returns {boolean}
+ */
+export function isIconName(value) {
+  if (!value || typeof value !== 'string') return false
+  // Quick heuristic: icon names always start with an uppercase letter.
+  if (!/^[A-Z]/.test(value)) return false
+  return !!resolveIcon(value)
+}

package/src/services/builderHelper/jsExecutor.js

@@ -1,76 +1,232 @@
 import { Services } from '../Endpoints'
 import fetchReportDataByPageId from '../reportData/fetchReportData'
+import toast from 'react-hot-toast'
+import { getRouter } from '../routerRef'
+import { getGlobalData, setGlobalData } from '../globalStore'
+
+// ─────────────────────────────────────────────────────────────────────────────
+// showToast — available in every Calculation as a named function.
+// react-hot-toast is a direct dependency of this package, and <Toaster /> is
+// mounted by RoboByteFrontBuilderProvider, so both use the same module instance.
+//
+// Usage (inside any action code):
+//   showToast('Saved successfully', 'success')
+//   showToast('Something went wrong', 'error')
+//   showToast('Please review the form', 'warning')
+//   showToast('Data loaded', 'info')
+//
+// type: 'success' | 'error' | 'warning' | 'info' | 'loading' (default: 'default')
+// ─────────────────────────────────────────────────────────────────────────────
+function showToast(message, type = 'default') {
+  switch (type) {
+    case 'success': return toast.success(message)
+    case 'error':   return toast.error(message)
+    case 'warning': return toast(message, { icon: '⚠️' })
+    case 'info':    return toast(message, { icon: 'ℹ️' })
+    case 'loading': return toast.loading(message)
+    default:        return toast(message)
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// URL helpers
+// ─────────────────────────────────────────────────────────────────────────────
 
 /**
- * Centralized JSEditor code executor
- * Executes user-defined Calculation functions with injected services
+ * Returns current page URL params as a plain object.
+ * Computed fresh at execution time — no React hook required.
  *
- * @param {string} code - The user's JavaScript code containing a Calculation function
- * @param {object} context - Execution context with form and data
- * @param {object} context.form - Form data
- * @param {object} context.data - Global data object
- * @returns {Promise<any>} - Result from the Calculation function
+ * Shape: { query: Record<string,string>, pathname: string, asPath: string }
  */
-export async function executeJSCode(code, context = {}) {
-  if (!code) {
-    throw new Error('No code provided to execute')
+export function getUrlParams() {
+  if (typeof window === 'undefined') {
+    return { query: {}, pathname: '', asPath: '' }
+  }
+  const search = new URLSearchParams(window.location.search)
+  const query = Object.fromEntries(search.entries())
+  return {
+    query,
+    pathname: window.location.pathname,
+    asPath: window.location.pathname + window.location.search,
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Unified context shape
+// ─────────────────────────────────────────────────────────────────────────────
+//
+//  form       — form field values (state snapshot, read-only)
+//  data       — reactive data state for this component/dialog/view (read-only snapshot)
+//  setData    — state setter; Calculation can call setData(prev => ({...}))
+//  dataRef    — mutable non-reactive store (read/write, no re-render)
+//  reportRefs — map of { [nodeId]: updateRef } for every ReportViewer on page
+//  openDialog / closeDialog — open or close a named dialog
+//  urlParams  — { query, pathname, asPath } from window.location (auto-computed)
+//
+//  page       — always points to the PARENT/MAIN-PAGE stores.
+//               Inside a dialog or embedded view `data` is the isolated child
+//               state while `page.data` is the outer page's state.
+//               In a top-level page page === { data, setData, dataRef, reportRefs }.
+//
+// Calculation signature:
+//   function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page) { ... }
+//
+// IMPORTANT — setData and data are kept in sync within a single execution:
+//   setData(prev => ({ ...prev, userId: 42 }))
+//   console.log(data.userId)  // ← 42, not stale. Works as expected.
+//
+// ─────────────────────────────────────────────────────────────────────────────
+
+function extractContext(context) {
+  const rawData    = context.data       ?? {}
+  const rawSetData = context.setData    ?? (() => {})
+  const dataRef    = context.dataRef    ?? {}
+  const reportRefs = context.reportRefs ?? {}
+
+  // ── Live data snapshot ────────────────────────────────────────────────────
+  //
+  // React state updates are asynchronous: calling setData() schedules a
+  // re-render but does NOT change the `data` reference captured by the current
+  // Calculation closure. This means code like:
+  //
+  //   setData(prev => ({ ...prev, userId: 42 }))
+  //   console.log(data.userId)   // ← still undefined!
+  //
+  // is confusing and hard to debug.
+  //
+  // Fix: maintain a mutable `dataSnapshot` object that is kept in sync with
+  // state. We pass this object (not the raw snapshot) as `data` to the
+  // Calculation. When wrappedSetData is called, dataSnapshot is updated
+  // in-place before the React re-render is scheduled — so any code that runs
+  // after setData() in the same function sees the new values immediately.
+  //
+  const dataSnapshot = { ...rawData }
+
+  const wrappedSetData = (updater) => {
+    // Compute the next state eagerly using our local snapshot as `prev`.
+    // This is safe because we always keep the snapshot in sync with real state.
+    const next = typeof updater === 'function' ? updater(dataSnapshot) : updater
+    if (next && typeof next === 'object') {
+      // Mutate snapshot in-place so that subsequent reads of `data` inside
+      // the same Calculation see the updated values.
+      Object.keys(dataSnapshot).forEach(k => delete dataSnapshot[k])
+      Object.assign(dataSnapshot, next)
+    }
+    // Schedule the React state update (triggers component re-render)
+    rawSetData(next)
   }
 
-  const { form = {}, data = {} } = context
+  return {
+    form: context.form ?? {},
+    data:    dataSnapshot,    // ← live-updating reference
+    setData: wrappedSetData,  // ← syncs snapshot before scheduling re-render
+    dataRef,
+    reportRefs,
+    openDialog:       context.openDialog       ?? (() => {}),
+    closeDialog:      context.closeDialog      ?? (() => {}),
+    openPrintLayout:  context.openPrintLayout  ?? (() => {}),
+    closePrintLayout: context.closePrintLayout ?? (() => {}),
+    urlParams: getUrlParams(),
+    // `page` — always the parent/main-page stores.
+    // In dialogs/embedded views these differ from the isolated `data`.
+    // In a top-level page they are identical.
+    page: {
+      data:       context.pageData       ?? dataSnapshot,
+      setData:    context.pageSetData    ?? wrappedSetData,
+      dataRef:    context.pageDataRef    ?? dataRef,
+      reportRefs: context.pageReportRefs ?? reportRefs,
+    },
+    // Repeater-scoped item context — null outside a Repeater.
+    // Available as closure variables `dataItem` and `itemIndex` in expressions.
+    dataItem:  context.dataItem  ?? null,
+    itemIndex: context.itemIndex ?? null,
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Async executor (used by action executor and direct calls)
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Execute a user-defined Calculation function asynchronously.
+ *
+ * @param {string} code    - JS code containing a Calculation function
+ * @param {object} context - Execution context (see shape above)
+ * @returns {Promise<any>}
+ */
+export async function executeJSCode(code, context = {}) {
+  if (!code) throw new Error('No code provided to execute')
+
+  const { form, data, setData, dataRef, reportRefs, openDialog, closeDialog,
+          openPrintLayout, closePrintLayout, urlParams, page } = extractContext(context)
+
+  // extraVars: optional plain object of named variables to inject directly into
+  // the Calculation's lexical scope.  e.g. { rowData: params.data }
+  const extraVars   = (context.extraVars && typeof context.extraVars === 'object') ? context.extraVars : {}
+  const extraNames  = Object.keys(extraVars)
+  const extraValues = Object.values(extraVars)
 
   try {
-    // Create async function from code with services available
     const fn = new Function(
-      'form',
-      'data',
-      'GetService',
-      'PostService',
-      'UpdateService',
-      'DeleteService',
-      'PatchService',
+      'form', 'data', 'setData', 'dataRef', 'reportRefs', 'openDialog', 'closeDialog',
+      'openPrintLayout', 'closePrintLayout',
+      'urlParams', 'page',
+      'GetService', 'PostService', 'UpdateService', 'DeleteService', 'PatchService',
       'fetchReportData',
+      'showToast',
+      'router',
+      'globalData', 'setGlobalData',
+      ...extraNames,
       `
 return (async function() {
 ${code}
 if (typeof Calculation !== 'function') {
   throw new Error('Calculation function not found')
 }
-return await Calculation(form, data)
+return await Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, openPrintLayout, closePrintLayout, urlParams, page)
 })()
 `
     )
 
-    // Execute the function with services
-    const result = await fn(
-      form,
-      data,
+    return await fn(
+      form, data, setData, dataRef, reportRefs, openDialog, closeDialog,
+      openPrintLayout, closePrintLayout,
+      urlParams, page,
       Services.GetService,
       Services.PostService,
       Services.UpdateService,
       Services.DeleteService,
       Services.PatchService,
-      fetchReportDataByPageId
+      fetchReportDataByPageId,
+      showToast,
+      getRouter(),
+      getGlobalData(), setGlobalData,
+      ...extraValues
     )
-
-    return result
   } catch (error) {
     console.error('JSCode execution error:', error)
     throw error
   }
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Sync factory (used by resolveProps for expression-based prop resolution)
+// ─────────────────────────────────────────────────────────────────────────────
+
 /**
- * Synchronous version for prop resolution
- * Returns the Calculation function itself without executing it
+ * Parse a user Calculation function synchronously and return it ready to call.
+ * The returned function has services in its closure and accepts:
+ *   (form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page)
  *
- * @param {string} code - The user's JavaScript code containing a Calculation function
- * @param {object} context - Execution context with form and data
- * @returns {Function} - The Calculation function ready to be called
+ * @param {string} code    - JS code containing a Calculation function
+ * @param {object} context - Execution context (see shape above)
+ * @returns {Function}     - The Calculation function
  */
 export function getJSCalculationFunction(code, context = {}) {
-  if (!code) {
-    throw new Error('No code provided')
-  }
+  if (!code) throw new Error('No code provided')
+
+  const { form, data, setData, dataRef, reportRefs, openDialog, closeDialog,
+          openPrintLayout, closePrintLayout, urlParams, page, dataItem, itemIndex } = extractContext(context)
 
   try {
     const hasAsyncCalculation = /async\s+function\s+Calculation/.test(code)
@@ -81,13 +237,18 @@ export function getJSCalculationFunction(code, context = {}) {
         : code
 
     const fn = new Function(
-      ...Object.keys(context),
-      'GetService',
-      'PostService',
-      'UpdateService',
-      'DeleteService',
-      'PatchService',
+      'form', 'data', 'setData', 'dataRef', 'reportRefs', 'openDialog', 'closeDialog',
+      'openPrintLayout', 'closePrintLayout',
+      'urlParams', 'page',
+      'GetService', 'PostService', 'UpdateService', 'DeleteService', 'PatchService',
       'fetchReportData',
+      'showToast',
+      'router',
+      'globalData', 'setGlobalData',
+      // Repeater-scoped variables — available as bare names inside expressions.
+      // `dataItem`  — the current repeated item object  (null outside a Repeater)
+      // `itemIndex` — the current iteration index       (null outside a Repeater)
+      'dataItem', 'itemIndex',
       `
 ${normalizedCode}
 if (typeof Calculation !== 'function') {
@@ -97,17 +258,22 @@ return Calculation
 `
     )
 
-    const calc = fn(
-      ...Object.values(context),
+    // Return the raw Calculation function — caller is responsible for passing all args
+    return fn(
+      form, data, setData, dataRef, reportRefs, openDialog, closeDialog,
+      openPrintLayout, closePrintLayout,
+      urlParams, page,
       Services.GetService,
       Services.PostService,
       Services.UpdateService,
       Services.DeleteService,
       Services.PatchService,
-      fetchReportDataByPageId
+      fetchReportDataByPageId,
+      showToast,
+      getRouter(),
+      getGlobalData(), setGlobalData,
+      dataItem, itemIndex
     )
-
-    return calc
   } catch (error) {
     console.error('JSCode parsing error:', error)
     throw error

package/src/services/builderHelper/nodeFactory.js

@@ -11,34 +11,51 @@ const CONTAINER_TYPES = [
   'repeater',
   'widget',
   'layout',
-  'layout-cell'
+  'layout-cell',
+  'dialog',
 ]
 
+/**
+ * Recursively replaces every node `id` in a tree with a fresh UUID.
+ * Used when a saved widget is dropped so each instance gets unique IDs.
+ */
+export function remapIds(node) {
+  if (!node || typeof node !== 'object') return node
+  return {
+    ...node,
+    id: `cmp_${crypto.randomUUID()}`,
+    children: Array.isArray(node.children)
+      ? node.children.map(remapIds)
+      : node.children,
+  }
+}
+
 export function createNode(type, overrides = {}) {
+  // When a full saved node tree is passed (e.g. a widget drop), the overrides
+  // object already contains an `id` from the saved schema. If we just spread it
+  // every drop of the same widget shares identical IDs, breaking selection.
+  // Detect this case and remap the entire tree to fresh IDs instead.
+  if (overrides && overrides.id) {
+    return remapIds(overrides)
+  }
+
   const isContainer = CONTAINER_TYPES.includes(type)
-  const randomKey = `${type}_${Math.random().toString(36).substring(2, 9)}`
+  const randomKey   = `${type}_${Math.random().toString(36).substring(2, 9)}`
 
-  const node = {
+  return {
     id: `cmp_${crypto.randomUUID()}`,
     type,
     props: {
       main: {
-        key: {
-          valueType: 'value',
-          value: randomKey
-        },
-        enabled: true
+        key: { valueType: 'value', value: randomKey },
+        enabled: true,
       },
       style: {},
-      advanced: {}
-    },
-    expressions: {
-      main: {}
+      advanced: {},
     },
+    expressions: { main: {} },
     className: '',
     children: isContainer ? [] : undefined,
-    ...overrides
+    ...overrides,
   }
-
-  return node
 }