@memberjunction/react-runtime 2.75.0 → 2.77.0

package/dist/utilities/resource-manager.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resourceManager = exports.ResourceManager = void 0;
+class ResourceManager {
+    constructor() {
+        this.resources = new Map();
+        this.globalResources = new Set();
+        this.cleanupCallbacks = new Map();
+    }
+    setTimeout(componentId, callback, delay, metadata) {
+        const id = window.setTimeout(() => {
+            this.removeResource(componentId, 'timer', id);
+            callback();
+        }, delay);
+        this.addResource(componentId, {
+            type: 'timer',
+            id,
+            cleanup: () => window.clearTimeout(id),
+            metadata
+        });
+        return id;
+    }
+    setInterval(componentId, callback, delay, metadata) {
+        const id = window.setInterval(callback, delay);
+        this.addResource(componentId, {
+            type: 'interval',
+            id,
+            cleanup: () => window.clearInterval(id),
+            metadata
+        });
+        return id;
+    }
+    requestAnimationFrame(componentId, callback, metadata) {
+        const id = window.requestAnimationFrame((time) => {
+            this.removeResource(componentId, 'animationFrame', id);
+            callback(time);
+        });
+        this.addResource(componentId, {
+            type: 'animationFrame',
+            id,
+            cleanup: () => window.cancelAnimationFrame(id),
+            metadata
+        });
+        return id;
+    }
+    clearTimeout(componentId, id) {
+        window.clearTimeout(id);
+        this.removeResource(componentId, 'timer', id);
+    }
+    clearInterval(componentId, id) {
+        window.clearInterval(id);
+        this.removeResource(componentId, 'interval', id);
+    }
+    cancelAnimationFrame(componentId, id) {
+        window.cancelAnimationFrame(id);
+        this.removeResource(componentId, 'animationFrame', id);
+    }
+    addEventListener(componentId, target, type, listener, options) {
+        target.addEventListener(type, listener, options);
+        const resourceId = `${type}-${Date.now()}-${Math.random()}`;
+        this.addResource(componentId, {
+            type: 'eventListener',
+            id: resourceId,
+            cleanup: () => target.removeEventListener(type, listener, options),
+            metadata: { target, type, options }
+        });
+    }
+    registerDOMElement(componentId, element, cleanup) {
+        const resourceId = `dom-${Date.now()}-${Math.random()}`;
+        this.addResource(componentId, {
+            type: 'domElement',
+            id: resourceId,
+            cleanup: () => {
+                if (cleanup) {
+                    cleanup();
+                }
+                if (element.parentNode) {
+                    element.parentNode.removeChild(element);
+                }
+            },
+            metadata: { element }
+        });
+    }
+    registerReactRoot(componentId, root, unmountFn) {
+        this.addResource(componentId, {
+            type: 'reactRoot',
+            id: `react-root-${componentId}`,
+            cleanup: unmountFn,
+            metadata: { root }
+        });
+    }
+    registerCleanup(componentId, cleanup) {
+        if (!this.cleanupCallbacks.has(componentId)) {
+            this.cleanupCallbacks.set(componentId, []);
+        }
+        this.cleanupCallbacks.get(componentId).push(cleanup);
+    }
+    registerGlobalResource(resource) {
+        this.globalResources.add(resource);
+    }
+    addResource(componentId, resource) {
+        if (!this.resources.has(componentId)) {
+            this.resources.set(componentId, new Set());
+        }
+        this.resources.get(componentId).add(resource);
+    }
+    removeResource(componentId, type, id) {
+        const componentResources = this.resources.get(componentId);
+        if (componentResources) {
+            const toRemove = Array.from(componentResources).find(r => r.type === type && r.id === id);
+            if (toRemove) {
+                componentResources.delete(toRemove);
+            }
+        }
+    }
+    cleanupComponent(componentId) {
+        const componentResources = this.resources.get(componentId);
+        if (componentResources) {
+            componentResources.forEach(resource => {
+                try {
+                    resource.cleanup();
+                }
+                catch (error) {
+                    console.error(`Error cleaning up ${resource.type} resource:`, error);
+                }
+            });
+            this.resources.delete(componentId);
+        }
+        const callbacks = this.cleanupCallbacks.get(componentId);
+        if (callbacks) {
+            callbacks.forEach(callback => {
+                try {
+                    callback();
+                }
+                catch (error) {
+                    console.error('Error executing cleanup callback:', error);
+                }
+            });
+            this.cleanupCallbacks.delete(componentId);
+        }
+    }
+    cleanupGlobal() {
+        this.globalResources.forEach(resource => {
+            try {
+                resource.cleanup();
+            }
+            catch (error) {
+                console.error(`Error cleaning up global ${resource.type} resource:`, error);
+            }
+        });
+        this.globalResources.clear();
+    }
+    cleanupAll() {
+        for (const componentId of this.resources.keys()) {
+            this.cleanupComponent(componentId);
+        }
+        this.cleanupGlobal();
+    }
+    getStats() {
+        const resourceCounts = {};
+        for (const resources of this.resources.values()) {
+            resources.forEach(resource => {
+                resourceCounts[resource.type] = (resourceCounts[resource.type] || 0) + 1;
+            });
+        }
+        return {
+            componentCount: this.resources.size,
+            resourceCounts,
+            globalResourceCount: this.globalResources.size
+        };
+    }
+}
+exports.ResourceManager = ResourceManager;
+exports.resourceManager = new ResourceManager();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memberjunction/react-runtime",
-  "version": "2.75.0",
+  "version": "2.77.0",
   "description": "Platform-agnostic React component runtime for MemberJunction. Provides core compilation, registry, and execution capabilities for React components in any JavaScript environment.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,9 +25,9 @@
   },
   "homepage": "https://github.com/MemberJunction/MJ#readme",
   "dependencies": {
-    "@memberjunction/core": "2.75.0",
-    "@memberjunction/global": "2.75.0",
-    "@memberjunction/interactive-component-types": "2.75.0",
+    "@memberjunction/core": "2.77.0",
+    "@memberjunction/global": "2.77.0",
+    "@memberjunction/interactive-component-types": "2.77.0",
     "@babel/standalone": "^7.23.5",
     "rxjs": "^7.8.1"
   },

package/samples/entities-1.js

@@ -0,0 +1,493 @@
+function EntityFieldSummaryTable({ data, utilities, styles, components, onStateChanged, filters, sortBy, sortDirection }) {
+  const { TableComponent, FiltersPanel } = components;
+
+  const handleSort = (column, direction) => {
+    onStateChanged?.({ sortBy: column, sortDirection: direction });
+  };
+
+  const handleFiltersChange = (updatedFilters) => {
+    onStateChanged?.({ filters: updatedFilters });
+  };
+
+  const columns = [
+    {
+      key: 'EntityName',
+      title: 'Entity Name',
+      dataIndex: 'EntityName',
+      width: 200,
+      ellipsis: true,
+      sortable: true,
+      render: (text) => (
+        <div style={{ 
+          maxWidth: '200px',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          cursor: 'pointer',
+          color: styles.colors.primary
+        }} title={text}>
+          {text}
+        </div>
+      )
+    },
+    {
+      key: 'EntityDescription',
+      title: 'Description',
+      dataIndex: 'EntityDescription',
+      width: 300,
+      ellipsis: true,
+      sortable: false,
+      render: (text) => (
+        <div style={{ 
+          maxWidth: '300px',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          color: styles.colors.textSecondary
+        }} title={text}>
+          {text || 'No description'}
+        </div>
+      )
+    },
+    {
+      key: 'TotalFields',
+      title: 'Total Fields',
+      dataIndex: 'TotalFields',
+      width: 100,
+      sortable: true,
+      align: 'right',
+      render: (value) => (
+        <span style={{ 
+          fontWeight: styles.typography.fontWeight?.medium || '500',
+          color: styles.colors.text
+        }}>
+          {value || 0}
+        </span>
+      )
+    },
+    {
+      key: 'TextFields',
+      title: 'Text',
+      dataIndex: 'TextFields',
+      width: 80,
+      sortable: true,
+      align: 'right',
+      render: (value) => (
+        <span style={{ color: styles.colors.info }}>
+          {value || 0}
+        </span>
+      )
+    },
+    {
+      key: 'NumberFields',
+      title: 'Number',
+      dataIndex: 'NumberFields',
+      width: 80,
+      sortable: true,
+      align: 'right',
+      render: (value) => (
+        <span style={{ color: styles.colors.success }}>
+          {value || 0}
+        </span>
+      )
+    },
+    {
+      key: 'DateFields',
+      title: 'Date',
+      dataIndex: 'DateFields',
+      width: 80,
+      sortable: true,
+      align: 'right',
+      render: (value) => (
+        <span style={{ color: styles.colors.warning }}>
+          {value || 0}
+        </span>
+      )
+    },
+    {
+      key: 'BooleanFields',
+      title: 'Boolean',
+      dataIndex: 'BooleanFields',
+      width: 80,
+      sortable: true,
+      align: 'right',
+      render: (value) => (
+        <span style={{ color: styles.colors.error }}>
+          {value || 0}
+        </span>
+      )
+    },
+    {
+      key: 'GuidFields',
+      title: 'GUID',
+      dataIndex: 'GuidFields',
+      width: 80,
+      sortable: true,
+      align: 'right',
+      render: (value) => (
+        <span style={{ color: styles.colors.textSecondary }}>
+          {value || 0}
+        </span>
+      )
+    },
+    {
+      key: 'BinaryFields',
+      title: 'Binary',
+      dataIndex: 'BinaryFields',
+      width: 80,
+      sortable: true,
+      align: 'right',
+      render: (value) => (
+        <span style={{ color: styles.colors.textTertiary }}>
+          {value || 0}
+        </span>
+      )
+    },
+    {
+      key: 'EntityRowCount',
+      title: 'Rows',
+      dataIndex: 'EntityRowCount',
+      width: 100,
+      sortable: true,
+      align: 'right',
+      render: (value) => (
+        <span style={{ fontSize: styles.typography.fontSize.sm }}>
+          {value?.toLocaleString() || '0'}
+        </span>
+      )
+    },
+    {
+      key: 'EntityStatus',
+      title: 'Status',
+      dataIndex: 'EntityStatus',
+      width: 100,
+      sortable: true,
+      render: (value) => (
+        <span style={{
+          padding: '4px 8px',
+          borderRadius: styles.borders.radius,
+          fontSize: styles.typography.fontSize.xs,
+          backgroundColor: value === 'Active' ? styles.colors.successLight : 
+                          value === 'Deprecated' ? styles.colors.warningLight : 
+                          styles.colors.errorLight,
+          color: value === 'Active' ? styles.colors.success : 
+                 value === 'Deprecated' ? styles.colors.warning : 
+                 styles.colors.error
+        }}>
+          {value}
+        </span>
+      )
+    },
+    {
+      key: 'LastFieldUpdate',
+      title: 'Last Updated',
+      dataIndex: 'LastFieldUpdate',
+      width: 150,
+      sortable: true,
+      render: (value) => (
+        <div title={value ? new Date(value).toLocaleString() : ''}>
+          <span style={{
+            fontSize: styles.typography.fontSize.sm,
+            color: styles.colors.textSecondary
+          }}>
+            {value ? new Date(value).toLocaleDateString() : 'Never'}
+          </span>
+        </div>
+      )
+    }
+  ];
+
+  const containerStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    backgroundColor: styles.colors.background,
+    fontFamily: styles.typography.fontFamily
+  };
+
+  const filterContainerStyle = {
+    padding: styles.spacing.md,
+    borderBottom: `1px solid ${styles.colors.border}`,
+    backgroundColor: styles.colors.surface
+  };
+
+  const tableContainerStyle = {
+    flex: 1,
+    overflow: 'auto',
+    padding: styles.spacing.md
+  };
+
+  return (
+    <div style={containerStyle}>
+      <div style={filterContainerStyle}>
+        <FiltersPanel
+          searchTerm={filters?.searchTerm || ''}
+          minFields={filters?.minFields || 0}
+          maxFields={filters?.maxFields || 9999}
+          selectedStatuses={filters?.selectedStatuses || ['Active']}
+          typeFilters={filters?.typeFilters || {}}
+          onFiltersChange={handleFiltersChange}
+          styles={styles}
+          utilities={utilities}
+          components={components}
+        />
+      </div>
+      <div style={tableContainerStyle}>
+        <TableComponent
+          columns={columns}
+          data={data || []}
+          sortColumn={sortBy}
+          sortDirection={sortDirection}
+          onSort={handleSort}
+          styles={styles}
+          utilities={utilities}
+          components={components}
+        />
+      </div>
+    </div>
+  );
+}
+
+/*******************************************************
+   TableComponent
+   undefined
+*******************************************************/
+function TableComponent({ columns = [], data = [], sortColumn, sortDirection, styles = {}, callbacks = {}, ...userState }) {
+  const updateState = (newState) => {
+    callbacks?.UpdateUserState?.({ ...userState, ...newState });
+  };
+
+  const handleSort = (columnName) => {
+    const newDirection = sortColumn === columnName && sortDirection === 'asc' ? 'desc' : 'asc';
+    updateState({ sortColumn: columnName, sortDirection: newDirection });
+  };
+
+  const containerStyle = {
+    height: '100%',
+    overflow: 'auto',
+    backgroundColor: styles.colors?.background || '#ffffff',
+    border: `1px solid ${styles.colors?.border || '#e0e0e0'}`,
+    borderRadius: styles.borders?.radius || '4px',
+    fontFamily: styles.typography?.fontFamily || 'Arial, sans-serif'
+  };
+
+  const tableStyle = {
+    width: '100%',
+    borderCollapse: 'collapse',
+    fontSize: styles.typography?.fontSize?.md || '14px'
+  };
+
+  const headerStyle = {
+    backgroundColor: styles.colors?.surface || '#f5f5f5',
+    borderBottom: `1px solid ${styles.colors?.border || '#e0e0e0'}`,
+    padding: styles.spacing?.md || '12px',
+    textAlign: 'left',
+    fontWeight: styles.typography?.fontWeight?.semibold || '600',
+    color: styles.colors?.text || '#333333',
+    cursor: 'pointer',
+    userSelect: 'none'
+  };
+
+  const cellStyle = {
+    padding: styles.spacing?.md || '12px',
+    borderBottom: `1px solid ${styles.colors?.borderLight || styles.colors?.border || '#e0e0e0'}`,
+    color: styles.colors?.textSecondary || '#666666'
+  };
+
+  const sortIconStyle = {
+    marginLeft: styles.spacing?.xs || '4px',
+    fontSize: styles.typography?.fontSize?.sm || '12px'
+  };
+
+  return (
+    <div style={containerStyle}>
+      <table style={tableStyle}>
+        <thead>
+          <tr>
+            {columns.map(column => (
+              <th
+                key={column.field}
+                style={{
+                  ...headerStyle,
+                  ...(sortColumn === column.field 
+                    ? { backgroundColor: styles.colors?.primaryLight || styles.colors?.primary || '#e3f2fd' }
+                    : {})
+                }}
+                onClick={() => handleSort(column.field)}
+              >
+                {column.title}
+                {sortColumn === column.field && (
+                  <span style={sortIconStyle}>
+                    {sortDirection === 'asc' ? '↑' : '↓'}
+                  </span>
+                )}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, index) => (
+            <tr key={index}>
+              {columns.map(column => (
+                <td 
+                  key={`${index}-${column.field}`}
+                  style={cellStyle}
+                >
+                  {row[column.field] || '-'}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/*******************************************************
+   FiltersPanel
+   undefined
+*******************************************************/
+function FiltersPanel({ data, utilities, styles, components, searchTerm, minFields, maxFields, selectedStatuses, typeFilters, onStateChanged }) {
+  const handleSearchChange = (e) => {
+    onStateChanged?.({ searchTerm: e.target.value });
+  };
+
+  const handleMinFieldsChange = (e) => {
+    const value = parseInt(e.target.value) || 0;
+    onStateChanged?.({ minFields: value });
+  };
+
+  const handleMaxFieldsChange = (e) => {
+    const value = parseInt(e.target.value) || 0;
+    onStateChanged?.({ maxFields: value });
+  };
+
+  const handleStatusToggle = (status) => {
+    const updatedStatuses = selectedStatuses.includes(status)
+      ? selectedStatuses.filter(s => s !== status)
+      : [...selectedStatuses, status];
+    onStateChanged?.({ selectedStatuses: updatedStatuses });
+  };
+
+  const handleTypeChange = (typeName, value) => {
+    const updatedTypeFilters = { ...typeFilters, [typeName]: value };
+    onStateChanged?.({ typeFilters: updatedTypeFilters });
+  };
+
+  const containerStyle = {
+    padding: styles.spacing.md,
+    backgroundColor: styles.colors.surface,
+    border: `1px solid ${styles.colors.border}`,
+    borderRadius: styles.borders.radius,
+    height: '100%',
+    overflow: 'auto'
+  };
+
+  const inputStyle = {
+    width: '100%',
+    padding: styles.spacing.sm,
+    border: `1px solid ${styles.colors.border}`,
+    borderRadius: styles.borders.radius,
+    fontSize: styles.typography.fontSize.sm,
+    marginBottom: styles.spacing.sm
+  };
+
+  const labelStyle = {
+    display: 'block',
+    marginBottom: styles.spacing.xs,
+    fontSize: styles.typography.fontSize.sm,
+    color: styles.colors.textSecondary,
+    fontWeight: styles.typography.fontWeight?.medium || '500'
+  };
+
+  const statusButtonStyle = (isActive) => ({
+    padding: `${styles.spacing.xs} ${styles.spacing.sm}`,
+    margin: `0 ${styles.spacing.xs} ${styles.spacing.xs} 0`,
+    border: `1px solid ${isActive ? styles.colors.primary : styles.colors.border}`,
+    borderRadius: styles.borders.radius,
+    backgroundColor: isActive ? styles.colors.primary : 'transparent',
+    color: isActive ? styles.colors.textInverse || styles.colors.background : styles.colors.text,
+    cursor: 'pointer',
+    fontSize: styles.typography.fontSize.xs
+  });
+
+  const numberInputStyle = {
+    width: '80px',
+    padding: styles.spacing.xs,
+    border: `1px solid ${styles.colors.border}`,
+    borderRadius: styles.borders.radius,
+    fontSize: styles.typography.fontSize.sm,
+    margin: `0 ${styles.spacing.sm}`
+  };
+
+  return (
+    <div style={containerStyle}>
+      <div style={{ marginBottom: styles.spacing.lg }}>
+        <label style={labelStyle}>Entity Name Search</label>
+        <input
+          type="text"
+          value={searchTerm || ''}
+          onChange={handleSearchChange}
+          placeholder="Search entities..."
+          style={inputStyle}
+        />
+      </div>
+
+      <div style={{ marginBottom: styles.spacing.lg }}>
+        <label style={labelStyle}>Field Count Range</label>
+        <div style={{ display: 'flex', alignItems: 'center', gap: styles.spacing.sm }}>
+          <span>Min:</span>
+          <input
+            type="number"
+            value={minFields || 0}
+            onChange={handleMinFieldsChange}
+            min="0"
+            style={numberInputStyle}
+          />
+          <span>Max:</span>
+          <input
+            type="number"
+            value={maxFields || 0}
+            onChange={handleMaxFieldsChange}
+            min="0"
+            style={numberInputStyle}
+          />
+        </div>
+      </div>
+
+      <div style={{ marginBottom: styles.spacing.lg }}>
+        <label style={labelStyle}>Status Filters</label>
+        <div>
+          {['Active', 'Deprecated', 'Disabled'].map(status => (
+            <button
+              key={status}
+              onClick={() => handleStatusToggle(status)}
+              style={statusButtonStyle(selectedStatuses.includes(status))}
+            >
+              {status}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <label style={labelStyle}>Type Distribution Threshold</label>
+        {Object.entries(typeFilters || {}).map(([typeName, currentValue]) => (
+          <div key={typeName} style={{ marginBottom: styles.spacing.sm }}>
+            <label style={{ ...labelStyle, fontSize: styles.typography.fontSize.xs }}>
+              {typeName}:
+            </label>
+            <input
+              type="number"
+              value={currentValue || 0}
+              onChange={(e) => handleTypeChange(typeName, parseInt(e.target.value) || 0)}
+              min="0"
+              style={numberInputStyle}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}