robobyte-front-builder 1.0.17 → 1.0.21

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
 }

package/src/services/builderHelper/numberFormat.js

@@ -0,0 +1,123 @@
+/**
+ * Shared number formatting utility.
+ *
+ * format options:
+ *   'number'   — 1,234.56
+ *   'currency' — $1,234.56  (currencyCode defaults to USD)
+ *   'percent'  — 12.4%      (expects 0-100 range; pass asRatio:true for 0-1)
+ *   'compact'  — 84.2k / 1.2M
+ *   'duration' — value treated as total seconds → "2h 14m 05s"
+ *   'bytes'    — 1.2 MB / 4.3 GB
+ *   'custom'   — returns raw value (caller formats via expression)
+ */
+
+/** Sanitise a decimals value from an expression field.
+ *  Accepts string/number, clamps to [0, 20], falls back to `fallback`. */
+function clampDec(val, fallback = 0) {
+  if (val == null) return fallback
+  const n = Math.round(Number(val))
+  if (!isFinite(n) || n < 0) return fallback
+  return Math.min(20, n)
+}
+
+/** Sanitise prefix/suffix — ensure they are plain strings. */
+function safeStr(val) {
+  if (val == null) return ''
+  return typeof val === 'string' ? val : String(val)
+}
+
+export function formatNumber(value, {
+  format     = 'number',
+  decimals,
+  prefix     = '',
+  suffix     = '',
+  locale     = 'en-US',
+  currency   = 'USD',
+  asRatio    = false,   // for percent: true means value is 0-1
+} = {}) {
+  if (value == null || value === '') return '—'
+  const num = Number(value)
+  if (isNaN(num)) return String(value)
+
+  // Sanitise caller-supplied strings from expression fields
+  const pfx = safeStr(prefix)
+  const sfx = safeStr(suffix)
+
+  let core
+
+  switch (format) {
+    case 'currency': {
+      const dec = clampDec(decimals, 2)
+      core = new Intl.NumberFormat(locale, {
+        style: 'currency', currency: safeStr(currency) || 'USD',
+        minimumFractionDigits: dec, maximumFractionDigits: dec,
+      }).format(num)
+      break
+    }
+
+    case 'percent': {
+      const pct = asRatio ? num * 100 : num
+      const dec = clampDec(decimals, 1)
+      core = pct.toFixed(dec) + '%'
+      break
+    }
+
+    case 'compact': {
+      core = new Intl.NumberFormat(locale, {
+        notation: 'compact',
+        maximumFractionDigits: clampDec(decimals, 1),
+      }).format(num)
+      break
+    }
+
+    case 'duration': {
+      // value = total seconds
+      const totalSec = Math.abs(Math.round(num))
+      const h = Math.floor(totalSec / 3600)
+      const m = Math.floor((totalSec % 3600) / 60)
+      const s = totalSec % 60
+      const parts = []
+      if (h) parts.push(`${h}h`)
+      if (m || h) parts.push(`${m}m`)
+      parts.push(`${String(s).padStart(2, '0')}s`)
+      core = (num < 0 ? '-' : '') + parts.join(' ')
+      break
+    }
+
+    case 'bytes': {
+      const abs = Math.abs(num)
+      const sign = num < 0 ? '-' : ''
+      const dec = clampDec(decimals, 1)
+      if (abs >= 1e12) core = sign + (abs / 1e12).toFixed(dec) + ' TB'
+      else if (abs >= 1e9)  core = sign + (abs / 1e9).toFixed(dec) + ' GB'
+      else if (abs >= 1e6)  core = sign + (abs / 1e6).toFixed(dec) + ' MB'
+      else if (abs >= 1e3)  core = sign + (abs / 1e3).toFixed(dec) + ' KB'
+      else core = sign + abs + ' B'
+      break
+    }
+
+    default: { // 'number'
+      const dec = clampDec(decimals, 0)
+      core = new Intl.NumberFormat(locale, {
+        minimumFractionDigits: dec,
+        maximumFractionDigits: dec,
+      }).format(num)
+      break
+    }
+  }
+
+  return `${pfx}${core}${sfx}`
+}
+
+/** Format a trend delta. Returns { text, positive, zero } */
+export function formatTrend(value, { isPercent = true, decimals = 1, invertColors = false } = {}) {
+  if (value == null || value === '') return { text: '—', positive: null, zero: true }
+  const num = Number(value)
+  if (isNaN(num)) return { text: String(value), positive: null, zero: false }
+  const zero     = num === 0
+  const positive = invertColors ? num < 0 : num > 0
+  const abs      = Math.abs(num)
+  const text     = (num > 0 ? '+' : num < 0 ? '−' : '') +
+                   (isPercent ? abs.toFixed(decimals) + '%' : abs.toFixed(decimals))
+  return { text, positive, zero }
+}

package/src/services/builderHelper/resolveProps.js

@@ -1,21 +1,68 @@
-import { getJSCalculationFunction } from './jsExecutor'
+import { getJSCalculationFunction, getUrlParams } from './jsExecutor'
 
+/**
+ * Resolve a node's props tab (main / style / advanced) into plain values.
+ *
+ * Accepts either:
+ *   - a plain context object: { form, data, setData, dataRef, reportRefs, … }
+ *   - a full viewerContext (has dataRef as a React ref with .current)
+ *
+ * Backward-compatible: callers that pass only { form, data } still work.
+ * Callers that pass the full viewerContext get dataItem / itemIndex / all
+ * page stores automatically, without any per-renderer boilerplate.
+ */
 export function resolveProps(node, tab, context = {}) {
   const props = node.props?.[tab] ?? {}
   const resolved = {}
 
+  const form    = context.form   ?? {}
+  const data    = context.data   ?? {}
+  const setData = context.setData ?? (() => {})
+
+  // dataRef may be a React ref ({ current: obj }) when viewerContext is passed
+  // directly, or a plain object when a custom resolveCtx is constructed.
+  const rawDataRef    = context.dataRef
+  const dataRef       = rawDataRef?.current !== undefined ? rawDataRef.current : (rawDataRef ?? {})
+
+  const rawReportRefs = context.reportRefs
+  const reportRefs    = rawReportRefs?.current !== undefined ? rawReportRefs.current : (rawReportRefs ?? {})
+
+  const openDialog  = context.openDialog  ?? (() => {})
+  const closeDialog = context.closeDialog ?? (() => {})
+  const urlParams   = getUrlParams()
+
+  // `page` — parent/main-page stores forwarded from the viewerContext.
+  // In isolated dialogs/embedded views these differ from the component's own data.
+  const page = context.page ?? {
+    data:       context.pageData       ?? data,
+    setData:    context.pageSetData    ?? setData,
+    dataRef:    context.pageDataRef    ?? dataRef,
+    reportRefs: context.pageReportRefs ?? reportRefs,
+  }
+
+  const execContext = {
+    form, data, setData, dataRef, reportRefs, openDialog, closeDialog, page,
+    // Repeater item context — present when inside a Repeater, null elsewhere
+    dataItem:  context.dataItem  ?? null,
+    itemIndex: context.itemIndex ?? null,
+  }
+
   for (const [key, field] of Object.entries(props)) {
     if (!field) continue
 
     if ((field.valueType || field.type) === 'value') {
-      resolved[key] = field.value
+      // Skip empty strings so the renderer's destructuring default kicks in.
+      // An explicitly cleared field should behave identically to "never set".
+      if (field.value !== '') resolved[key] = field.value
       continue
     }
 
     if ((field.valueType || field.type) === 'expression' && field.expression?.code) {
       try {
-        const calc = getJSCalculationFunction(field.expression.code, context)
-        const value = calc(context.form, context.data)
+        const calc = getJSCalculationFunction(field.expression.code, execContext)
+
+        // Call Calculation with all args — old functions that only declare (form, data) ignore extras
+        const value = calc(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page)
 
         // Viewer prop resolution is synchronous. Skip unresolved promises.
         if (value && typeof value.then === 'function') {
@@ -32,3 +79,25 @@ export function resolveProps(node, tab, context = {}) {
 
   return resolved
 }
+
+/**
+ * Resolve a scalar value from a KPI component's "value key" field.
+ *
+ * The field type is `expression`, so resolveProps already evaluates it.
+ * The result can be either:
+ *   • a string  → treat as a data key and look up data[key]
+ *   • anything else (number, boolean, null …) → use the value directly
+ *
+ * This lets users write either:
+ *   valueKey: "revenue"            → data["revenue"]
+ *   valueKey: data.price * data.qty  → computed value used as-is
+ *   valueKey: 42                   → literal 42
+ *
+ * @param {*}      key   The resolved value from resolveProps (already evaluated)
+ * @param {object} data  The current page data object
+ * @param {*}      fallback  Returned when key is null/undefined (default: undefined)
+ */
+export function resolveValue(key, data, fallback = undefined) {
+  if (key == null) return fallback
+  return typeof key === 'string' ? (data?.[key] ?? fallback) : key
+}