@zealicsolutions/web-ui 1.0.97-beta.1 → 1.0.97-beta.3

package/dist/cjs/components/RichTextViewer/components/VariableFormatter.d.ts

@@ -8,6 +8,7 @@ interface VariableFormatterProps {
     leaf: {
         text: string | number;
     };
+    debug?: boolean;
 }
 export declare const VariableFormatter: React.FC<VariableFormatterProps>;
 export {};

package/dist/cjs/components/RichTextViewer/utils/debugVariableState.d.ts

@@ -1,5 +1,47 @@
 import { StateConfigType } from 'containers/types/types';
 import { VariablePayload } from '../types';
+/**
+ * Variable State Debugging Utilities
+ *
+ * These utilities help troubleshoot issues with variable values not appearing from the state object.
+ *
+ * ## Usage Methods:
+ *
+ * ### 1. Automatic Debug Mode (Integrated)
+ * The VariableFormatter component automatically enables debugging in development mode when:
+ * - NODE_ENV === 'development' AND
+ * - REACT_APP_DEBUG_VARIABLES=true in .env OR
+ * - window.__ZEAL_DEBUG_VARIABLES__ = true in browser console
+ *
+ * ### 2. Manual Debug (Standalone)
+ * ```typescript
+ * import { debugVariableStateDetailed } from '../utils/debugVariableState';
+ *
+ * // In your component or wherever you have access to variable and stateObject:
+ * debugVariableStateDetailed(variablePayload, stateObject);
+ * ```
+ *
+ * ### 3. Browser Console Debug
+ * ```javascript
+ * // Enable debug mode globally
+ * window.__ZEAL_DEBUG_VARIABLES__ = true;
+ *
+ * // Then reload or trigger variable rendering
+ * ```
+ *
+ * ### 4. Environment Variable
+ * Add to your .env.development file:
+ * ```
+ * REACT_APP_DEBUG_VARIABLES=true
+ * ```
+ *
+ * ## Debug Output Includes:
+ * - Variable configuration (dataModelFieldId, format, etc.)
+ * - State object structure and available keys
+ * - Direct lookup results
+ * - Potential key matches (fuzzy search)
+ * - Actionable recommendations
+ */
 /**
  * Debugging utility to help troubleshoot variable state issues
  * @param variable The variable payload from the Rich Text Editor