@zealicsolutions/web-ui 1.0.96 → 1.0.97-beta.2

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

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

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

@@ -0,0 +1,109 @@
+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
+ * @param stateObject The current state object (localStateObject or stateConfig)
+ * @param logToConsole Whether to log debug information to console (default: true)
+ * @returns Debug information object
+ */
+export declare const debugVariableState: (variable: VariablePayload, stateObject: StateConfigType, logToConsole?: boolean) => {
+    variable: {
+        id: string;
+        text: string;
+        dataModelFieldId: string | undefined;
+        pmiObjectName: string | undefined;
+        dataFieldName: string | undefined;
+        dataType: string | undefined;
+        format: import("../types").DataDisplayFormatType | undefined;
+        defaultValue: string | number | boolean | null | undefined;
+    };
+    stateObject: {
+        exists: boolean;
+        keys: string[];
+        totalKeys: number;
+    };
+    lookup: {
+        keyExists: boolean;
+        rawValue: string | boolean | import("containers/types/types").FormDataStateConfig | import("containers/types/types").ActionEventType | import("containers/types/types").BaseStateValue | null | undefined;
+        valueType: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+    };
+    recommendations: string[];
+};
+/**
+ * Enhanced version of debugVariableState that also shows potential matches
+ * @param variable The variable payload
+ * @param stateObject The current state object
+ * @param logToConsole Whether to log to console
+ * @returns Debug info with potential matches
+ */
+export declare const debugVariableStateDetailed: (variable: VariablePayload, stateObject: StateConfigType, logToConsole?: boolean) => {
+    potentialMatches: {
+        key: string;
+        value: unknown;
+        reason: string;
+    }[];
+    variable: {
+        id: string;
+        text: string;
+        dataModelFieldId: string | undefined;
+        pmiObjectName: string | undefined;
+        dataFieldName: string | undefined;
+        dataType: string | undefined;
+        format: import("../types").DataDisplayFormatType | undefined;
+        defaultValue: string | number | boolean | null | undefined;
+    };
+    stateObject: {
+        exists: boolean;
+        keys: string[];
+        totalKeys: number;
+    };
+    lookup: {
+        keyExists: boolean;
+        rawValue: string | boolean | import("containers/types/types").FormDataStateConfig | import("containers/types/types").ActionEventType | import("containers/types/types").BaseStateValue | null | undefined;
+        valueType: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
+    };
+    recommendations: string[];
+};

package/dist/cjs/containers/types/moleculeTypes.d.ts

@@ -404,7 +404,7 @@ export interface DatePickerMoleculeType extends BaseMoleculeType {
 export interface TimePickerMoleculeType extends BaseMoleculeType {
     type: 'time_picker' | 'time_picker_display';
     config: {
-        props?: any;
+        props?: Record<string, unknown>;
     };
     properties: {
         text: TextProperties;
@@ -571,10 +571,10 @@ export interface BinaryRadioButtonsMoleculeType extends BaseMoleculeType {
     };
 }
 export type Molecule = StrictUnion<SimpleTextMoleculeType | TextMoleculeType | ConsentFieldMoleculeType | PasswordSetupMoleculeType | StepperMoleculeType | ChecklistsMoleculeType | AccordionMoleculeType | MenuMoleculeType | DrawerMoleculeType | TabsMoleculeType | DividerMoleculeType | LinkMoleculeType | VideoMoleculeType | ImageMoleculeType | ButtonMoleculeType | ChipMoleculeType | BadgeMoleculeType | AlertMoleculeType | BasicTextFieldMoleculeType | RatingMoleculeType | SwitchMoleculeType | SliderMoleculeType | SelectMoleculeType | DatePickerMoleculeType | TimePickerMoleculeType | EmailInputFieldMoleculeType | PhoneNumberInputFieldMoleculeType | NumericInputFieldMoleculeType | CurrencyInputFieldMoleculeType | AvatarMoleculeType | VisitMoleculeType | CalendarMoleculeType | DateCalendarMoleculeType | SpeedDialMoleculeType | CheckboxMoleculeType | BinaryRadioButtonsMoleculeType> & Partial<{
-    form: UseFormReturn<any>;
+    form: UseFormReturn<Record<string, unknown>>;
     formData: AnyObject;
     setFormData: Dispatch<SetStateAction<AnyObject>>;
 }>;
-export type ConsentType = any;
-export type VisitMoleculeProps = any;
+export type ConsentType = Record<string, unknown>;
+export type VisitMoleculeProps = Record<string, unknown>;
 export {};