robobyte-front-builder 1.0.17 → 1.0.21

package/src/services/PostService.js

@@ -4,75 +4,49 @@ import { resolveURL, getAccessToken } from './config'
 import toast from 'react-hot-toast'
 
 export default async function PostService(endpoint, showToast, data, params) {
-  const accessToken = getAccessToken()
 
 
-  let response = { status: 'Error', message: '' }
-  let result = null
-  let currentParams = {
-    ...params,
-    ...(endpoint.DataType == DataTypes.Params ? { ...data } : {})
-  }
-  let currnetData = endpoint.DataType == DataTypes.Form || endpoint.DataType == DataTypes.Body ? data : {}
-
-  if (!data) return
-  const url = resolveURL(endpoint)
-
-  const axiosConfig = {
-    method: 'post',
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      'Content-Type': endpoint.ContentType
-    },
-    params: {
-      ...currentParams
-    }
-  }
-
   try {
-    await Axios.post(url, currnetData, axiosConfig)
-      .then(r => {
-        result = r.data
-        response = {
-          status: 'Success',
-          message: r.data.message ? r.data.message : 'تم الحفظ بنجاح'
-        }
-      })
-      .catch(r => {
-        if (r.response && r.response.status == 400) {
-          response = {
-            status: 'Error',
-            message: typeof r.response.data == 'string' ? r.response.data : r.response.data.title
-            // message: "حدث خطأ اثناء الحفظ",
-          }
-        } else if (r.response && (r.response.status == 401 || r.response.status == 403)) {
-          response = {
-            status: 'Error',
-            message: 'غير مخول'
-          }
-        } else {
+    const accessToken = getAccessToken()
+    const url = resolveURL(endpoint)
 
-          response = {
-            status: 'Error',
-            message: 'حدث خطأ في الاتصال مع الخادم'
-          }
-        }
-      })
-  } catch (error) {
-    response = {
-      status: 'Error',
-      message: 'حدث خطأ في الخادم'
+    const currentParams = {
+      ...params,
+      ...(endpoint.DataType === DataTypes.Params ? { ...data } : {}),
     }
-  } finally {
-    if (response.status == 'Success') {
-      if (showToast) {
-        toast.success(response.message)
-      }
-    } else {
-      toast.error(response.message)
-      return false
+    const requestData =
+      endpoint.DataType === DataTypes.Form || endpoint.DataType === DataTypes.Body
+        ? data
+        : {}
+
+    const r = await Axios.post(url, requestData, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': endpoint.ContentType,
+      },
+      params: currentParams,
+    })
+
+    if (showToast) {
+      toast.success(r.data?.message || 'تم الحفظ بنجاح')
     }
+    return r.data
+
+  } catch (err) {
+    console.log(err)
+    const message = resolveErrorMessage(err)
+    toast.error(message)
+    return null
   }
+}
+
+function resolveErrorMessage(err) {
+  const status = err?.response?.status
+  const data   = err?.response?.data
 
-  return result
+  if (status === 400) return typeof data === 'string' ? data : data?.title || 'طلب غير صحيح'
+  if (status === 401 || status === 403) return 'غير مخول'
+  if (status >= 500) return 'حدث خطأ في الخادم'
+  if (err?.message) return err.message
+  return 'حدث خطأ في الاتصال مع الخادم'
 }

package/src/services/UpdateService.js

@@ -4,76 +4,50 @@ import { resolveURL, getAccessToken } from './config'
 import toast from 'react-hot-toast'
 
 export default async function UpdateService(endpoint, showToast, data, params, urlExtra = '') {
-  const accessToken = getAccessToken()
-  let response = { status: 'Error', message: '' }
-  let result = null
-  let currentParams = {
-    ...params,
-    ...(endpoint.DataType == DataTypes.Params ? { ...data } : {})
-  }
-  let currnetData =
-    endpoint.DataType == DataTypes.Form
-      ? data
-      : {
-        ...(endpoint.DataType == DataTypes.Body ? { ...data } : {})
-      }
-  if (!data) return
-  const url = resolveURL(endpoint) + urlExtra
-
-  const axiosConfig = {
-    method: 'put',
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-      'Content-Type': endpoint.ContentType
-    },
-    params: {
-      ...currentParams
-    }
-  }
 
   try {
-    await Axios.put(url, currnetData, axiosConfig)
-      .then(r => {
-        result = r.data
-        response = {
-          status: 'Success',
-          message: r.data.message ? r.data.message : 'تم الحفظ بنجاح'
-        }
-      })
-      .catch(r => {
-
-        if (r.response && r.response.status == 400) {
-          response = {
-            status: 'Error',
-            message: typeof r.response.data == 'string' ? r.response.data : r.response.data.title
-            // message: "حدث خطأ اثناء الحفظ",
-          }
-        } else if (r.response && (r.response.status == 401 || r.response.status == 403)) {
-          response = {
-            status: 'Error',
-            message: 'غير مخول'
-          }
-        } else {
+    const accessToken = getAccessToken()
+    const url = resolveURL(endpoint) + (urlExtra || '')
 
-          response = {
-            status: 'Error',
-            message: 'حدث خطأ في الاتصال مع الخادم'
-          }
-        }
-      })
-  } catch (error) {
-    response = {
-      status: 'Error',
-      message: 'حدث خطأ في الخادم'
+    const currentParams = {
+      ...params,
+      ...(endpoint.DataType === DataTypes.Params ? { ...data } : {}),
     }
-  } finally {
+    const requestData =
+      endpoint.DataType === DataTypes.Form
+        ? data
+        : endpoint.DataType === DataTypes.Body
+        ? { ...data }
+        : {}
+
+    const r = await Axios.put(url, requestData, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': endpoint.ContentType,
+      },
+      params: currentParams,
+    })
+
     if (showToast) {
-      if (response.status == 'Success') {
-        toast.success(response.message)
-      } else {
-        toast.error(response.message)
-      }
+      toast.success(r.data?.message || 'تم الحفظ بنجاح')
     }
+    return r.data
+
+  } catch (err) {
+    console.log(err)
+    const message = resolveErrorMessage(err)
+    toast.error(message)
+    return null
   }
-  return result
+}
+
+function resolveErrorMessage(err) {
+  const status = err?.response?.status
+  const data   = err?.response?.data
+
+  if (status === 400) return typeof data === 'string' ? data : data?.title || 'طلب غير صحيح'
+  if (status === 401 || status === 403) return 'غير مخول'
+  if (status >= 500) return 'حدث خطأ في الخادم'
+  if (err?.message) return err.message
+  return 'حدث خطأ في الاتصال مع الخادم'
 }

package/src/services/builderHelper/actionExecutor.js

@@ -1,10 +1,15 @@
 import { executeJSCode } from './jsExecutor'
 
 /**
- * Execute an action and set the result to the data object
- * @param {object} action - The action to execute
- * @param {object} context - The execution context (form, data)
- * @param {function} setData - Function to update the data object
+ * Execute an action and optionally set its result onto the data state.
+ *
+ * context shape:
+ *   form, data, setData, dataRef, reportRefs
+ *   (setData may also be provided as the legacy 3rd argument for backward compat)
+ *
+ * @param {object}   action  - The action to execute
+ * @param {object}   context - Execution context
+ * @param {function} [setData] - Legacy: state setter; prefer context.setData
  */
 export async function executeAction(action, context, setData) {
   if (!action || !action.code) {
@@ -12,27 +17,47 @@ export async function executeAction(action, context, setData) {
     return
   }
 
+  // Resolve setData: prefer what's already in context, fall back to the explicit arg
+  const effectiveSetData = context.setData || setData || (() => {})
+
+  // Build the full context that jsExecutor expects
+  const fullContext = {
+    form: context.form ?? {},
+    data: context.data ?? {},
+    dataRef: context.dataRef ?? {},
+    reportRefs: context.reportRefs ?? {},
+    openDialog: context.openDialog ?? (() => {}),
+    closeDialog: context.closeDialog ?? (() => {}),
+    // Thread parent-page stores so Calculation can access `page.data` etc.
+    pageData:       context.pageData,
+    pageSetData:    context.pageSetData,
+    pageDataRef:    context.pageDataRef,
+    pageReportRefs: context.pageReportRefs,
+    ...context,
+    setData: effectiveSetData,
+  }
+
   try {
-    // Execute the action code using centralized executor
-    const result = await executeJSCode(action.code, context)
+    const result = await executeJSCode(action.code, fullContext)
 
-    // Parse target path and set the result
     if (action.targetPath) {
-      setDataAtPath(setData, action.targetPath, result)
+      setDataAtPath(effectiveSetData, action.targetPath, result)
     }
+
+    return result
   } catch (e) {
     console.error(`Action execution error [${action.name}]:`, e)
   }
 }
 
 /**
- * Set value at a nested path in the data object
- * @param {function} setData - Function to update the data object
- * @param {string} path - Dot-notation path (e.g., 'data.d1' or 'd1')
- * @param {any} value - Value to set
+ * Set value at a nested path in the data object.
+ *
+ * @param {function} setData - State setter
+ * @param {string}   path    - Dot-notation path (e.g. 'data.d1' or 'd1')
+ * @param {any}      value   - Value to set
  */
 function setDataAtPath(setData, path, value) {
-  // Remove 'data.' prefix if present
   const cleanPath = path.startsWith('data.') ? path.substring(5) : path
 
   setData(prev => {
@@ -40,34 +65,125 @@ function setDataAtPath(setData, path, value) {
     const keys = cleanPath.split('.')
     let current = newData
 
-    // Navigate to the parent of the target key
     for (let i = 0; i < keys.length - 1; i++) {
-      if (!current[keys[i]]) {
-        current[keys[i]] = {}
-      }
+      if (!current[keys[i]]) current[keys[i]] = {}
       current = current[keys[i]]
     }
 
-    // Set the final value
     current[keys[keys.length - 1]] = value
-
     return newData
   })
 }
 
 /**
- * Execute all actions of a specific event type
- * @param {array} actions - All actions from schema
- * @param {string} eventType - Event type to filter (e.g., 'onLoad')
- * @param {object} context - Execution context (form, data)
- * @param {function} setData - Function to update the data object
+ * Execute all actions of a specific event type.
+ *
+ * @param {array}    actions   - All actions from schema
+ * @param {string}   eventType - Event type to filter ('onLoad', 'onSubmit', …)
+ * @param {object}   context   - Execution context (see executeAction)
+ * @param {function} [setData] - Legacy 4th arg for backward compat
  */
 export async function executeActionsByEvent(actions, eventType, context, setData) {
   if (!actions || !Array.isArray(actions)) return
 
   const matchingActions = actions.filter(action => action.event === eventType)
 
+  let lastResult
   for (const action of matchingActions) {
-    await executeAction(action, context, setData)
+    lastResult = await executeAction(action, context, setData)
+  }
+  return lastResult
+}
+
+/**
+ * Convenience helper for KPI / data-visualisation renderers.
+ *
+ * Reads `node.props.actions[eventName]` and executes the action,
+ * injecting `clickVars` into the Calculation's lexical scope so the
+ * user can reference them directly by name:
+ *
+ *   async function Calculation(form, data, setData, ...) {
+ *     // clickedItem, clickedValue, clickedLabel, clickedIndex, etc.
+ *     setData(prev => ({ ...prev, selected: clickedItem }))
+ *     openDialog('detail', { data: { row: clickedItem } })
+ *     showToast('Clicked: ' + clickedLabel, 'info')
+ *   }
+ *
+ * @param {object} node           - Builder node (has node.props.actions)
+ * @param {object} viewerContext  - Full viewerContext from the renderer
+ * @param {string} eventName      - 'onDataClick' | 'onCellClick' | 'onItemClick' | etc.
+ * @param {object} [clickVars]    - Click-specific variables to inject (clickedItem, clickedValue, …)
+ */
+export async function runKpiAction(node, viewerContext, eventName, clickVars = {}) {
+  const action = node.props?.actions?.[eventName]
+  if (!action?.code) return
+
+  const {
+    form, data, setData, dataRef, reportRefs,
+    openDialog, closeDialog,
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+  } = viewerContext ?? {}
+
+  const context = {
+    form:        form        ?? {},
+    data:        data        ?? {},
+    setData:     setData     ?? (() => {}),
+    dataRef:     dataRef?.current ?? dataRef ?? {},
+    reportRefs:  reportRefs  ?? {},
+    openDialog:  openDialog  ?? (() => {}),
+    closeDialog: closeDialog ?? (() => {}),
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+    extraVars: clickVars,
   }
+
+  return executeAction(action, context)
+}
+
+/**
+ * Convenience helper for field/input renderers.
+ *
+ * Reads the node's actions, builds the context from viewerContext, and fires
+ * all handlers registered for `eventName`.
+ *
+ * `newValue` is injected into the Calculation's lexical scope so action code
+ * can reference it directly without digging through form state:
+ *
+ *   async function Calculation(form, data, setData, ...) {
+ *     if (newValue === 'active') setData(prev => ({ ...prev, showExtra: true }))
+ *   }
+ *
+ * @param {object} node          - Builder node (has node.props.actions)
+ * @param {object} viewerContext - Full viewerContext from the renderer
+ * @param {string} eventName     - 'onChange' | 'onBlur' | etc.
+ * @param {any}    newValue      - The new field value, available as `newValue` in action code
+ */
+export async function runFieldAction(node, viewerContext, eventName, newValue) {
+  const propsActions = node.props?.actions ?? {}
+
+  const actions = Object.entries(propsActions)
+    .filter(([, v]) => v?.actionType === 'custom' && v?.code)
+    .map(([event, v]) => ({ event, code: v.code, name: event }))
+
+  if (!actions.length) return
+
+  const {
+    form, data, setData, dataRef, reportRefs,
+    openDialog, closeDialog,
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+  } = viewerContext
+
+  const context = {
+    form,
+    data,
+    setData:      setData      ?? (() => {}),
+    dataRef:      dataRef?.current ?? dataRef ?? {},
+    reportRefs:   reportRefs   ?? {},
+    openDialog:   openDialog   ?? (() => {}),
+    closeDialog:  closeDialog  ?? (() => {}),
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+    // Inject newValue into the Calculation's lexical scope via extraVars
+    extraVars: { newValue },
+  }
+
+  return executeActionsByEvent(actions, eventName, context)
 }

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)
+}