@memberjunction/react-runtime 2.75.0 → 2.76.0

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

package/src/compiler/component-compiler.ts

@@ -161,7 +161,11 @@ export class ComponentCompiler {
    */
   private wrapComponentCode(componentCode: string, componentName: string): string {
     return `
-      function createComponent(React, ReactDOM, useState, useEffect, useCallback, createStateUpdater, libraries, styles, console) {
+      function createComponent(
+        React, ReactDOM, 
+        useState, useEffect, useCallback, useMemo, useRef, useContext, useReducer, useLayoutEffect,
+        libraries, styles, console
+      ) {
         ${componentCode}
         
         // Ensure the component exists
@@ -193,19 +197,17 @@ export class ComponentCompiler {
    */
   private createComponentFactory(transpiledCode: string, componentName: string): Function {
     try {
-      // Create the factory function
+      // Create the factory function with all React hooks
       const factoryCreator = new Function(
-        'React', 'ReactDOM', 'useState', 'useEffect', 'useCallback',
-        'createStateUpdater', 'libraries', 'styles', 'console',
+        'React', 'ReactDOM',
+        'useState', 'useEffect', 'useCallback', 'useMemo', 'useRef', 'useContext', 'useReducer', 'useLayoutEffect',
+        'libraries', 'styles', 'console',
         `${transpiledCode}; return createComponent;`
       );
 
       // Return a function that executes the factory with runtime context
       return (context: RuntimeContext, styles: any = {}) => {
         const { React, ReactDOM, libraries = {} } = context;
-        
-        // Create state updater utility
-        const createStateUpdater = this.createStateUpdaterUtility();
 
         // Execute the factory creator to get the createComponent function
         const createComponentFn = factoryCreator(
@@ -214,7 +216,11 @@ export class ComponentCompiler {
           React.useState,
           React.useEffect,
           React.useCallback,
-          createStateUpdater,
+          React.useMemo,
+          React.useRef,
+          React.useContext,
+          React.useReducer,
+          React.useLayoutEffect,
           libraries,
           styles,
           console
@@ -227,7 +233,11 @@ export class ComponentCompiler {
           React.useState,
           React.useEffect,
           React.useCallback,
-          createStateUpdater,
+          React.useMemo,
+          React.useRef,
+          React.useContext,
+          React.useReducer,
+          React.useLayoutEffect,
           libraries,
           styles,
           console
@@ -238,28 +248,6 @@ export class ComponentCompiler {
     }
   }
 
-  /**
-   * Creates the state updater utility function for nested components
-   * @returns State updater function
-   */
-  private createStateUpdaterUtility(): Function {
-    return (statePath: string, parentStateUpdater: Function) => {
-      return (componentStateUpdate: any) => {
-        if (!statePath) {
-          // Root component - pass through directly
-          parentStateUpdater(componentStateUpdate);
-        } else {
-          // Sub-component - bubble up with path context
-          const pathParts = statePath.split('.');
-          const componentKey = pathParts[pathParts.length - 1];
-          
-          parentStateUpdater({
-            [componentKey]: componentStateUpdate
-          });
-        }
-      };
-    };
-  }
 
   /**
    * Validates compilation options
@@ -267,21 +255,62 @@ export class ComponentCompiler {
    * @throws Error if validation fails
    */
   private validateCompileOptions(options: CompileOptions): void {
+    // Check if options object exists
+    if (!options) {
+      throw new Error(
+        'Component compilation failed: No options provided.\n' +
+        'Expected an object with componentName and componentCode properties.\n' +
+        'Example: { componentName: "MyComponent", componentCode: "function MyComponent() { ... }" }'
+      );
+    }
+
+    // Check component name
     if (!options.componentName) {
-      throw new Error('Component name is required');
+      const providedKeys = Object.keys(options).join(', ');
+      throw new Error(
+        'Component compilation failed: Component name is required.\n' +
+        `Received options with keys: [${providedKeys}]\n` +
+        'Please ensure your component spec includes a "name" property.\n' +
+        'Example: { name: "MyComponent", code: "..." }'
+      );
     }
 
+    // Check component code
     if (!options.componentCode) {
-      throw new Error('Component code is required');
+      throw new Error(
+        `Component compilation failed: Component code is required for "${options.componentName}".\n` +
+        'Please ensure your component spec includes a "code" property with the component source code.\n' +
+        'Example: { name: "MyComponent", code: "function MyComponent() { return <div>Hello</div>; }" }'
+      );
     }
 
+    // Check code type
     if (typeof options.componentCode !== 'string') {
-      throw new Error('Component code must be a string');
+      const actualType = typeof options.componentCode;
+      throw new Error(
+        `Component compilation failed: Component code must be a string for "${options.componentName}".\n` +
+        `Received type: ${actualType}\n` +
+        `Received value: ${JSON.stringify(options.componentCode).substring(0, 100)}...\n` +
+        'Please ensure the code property contains a string of JavaScript/JSX code.'
+      );
+    }
+
+    // Check if code is empty or whitespace only
+    if (options.componentCode.trim().length === 0) {
+      throw new Error(
+        `Component compilation failed: Component code is empty for "${options.componentName}".\n` +
+        'The code property must contain valid JavaScript/JSX code defining a React component.'
+      );
     }
 
     // Basic syntax check
     if (!options.componentCode.includes(options.componentName)) {
-      throw new Error(`Component code must define a component named "${options.componentName}"`);
+      throw new Error(
+        `Component compilation failed: Component code must define a component named "${options.componentName}".\n` +
+        'The function/component name in the code must match the componentName property.\n' +
+        `Expected to find: function ${options.componentName}(...) or const ${options.componentName} = ...\n` +
+        'Code preview: ' + options.componentCode.substring(0, 200) + '...'
+      );
     }
   }
 

package/src/index.ts

@@ -53,7 +53,6 @@ export {
 
 export {
   buildComponentProps,
-  cleanupPropBuilder,
   normalizeCallbacks,
   normalizeStyles,
   validateComponentProps,

package/src/runtime/index.ts

@@ -23,7 +23,6 @@ export {
 
 export {
   buildComponentProps,
-  cleanupPropBuilder,
   normalizeCallbacks,
   normalizeStyles,
   validateComponentProps,