@qwickapps/react-framework 1.4.8 → 1.5.0

package/src/schemas/FeatureGridSchema.ts

@@ -4,7 +4,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { IsArray, IsOptional, IsNumber, IsIn, IsBoolean, IsString, ValidateNested, Min, Max } from 'class-validator';
+import { IsArray, IsOptional, IsNumber, IsIn, IsBoolean, IsString, ValidateNested } from 'class-validator';
 import { Type } from 'class-transformer';
 import 'reflect-metadata';
 import { Editor, Field, Schema, Model, FieldType } from '@qwickapps/schema';

package/src/schemas/FormBlockSchema.ts

@@ -4,7 +4,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { IsBoolean, IsIn, IsOptional, IsString } from 'class-validator';
+import { IsIn, IsOptional, IsString } from 'class-validator';
 import 'reflect-metadata';
 import { Editor, Field, Schema, FieldType } from '@qwickapps/schema';
 import { ContainerSchema } from './ContainerSchema';

package/src/schemas/GridCellSchema.ts

@@ -4,7 +4,6 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import type { ReactNode } from 'react';
 import { IsOptional, IsString, IsNumber, IsIn } from 'class-validator';
 import 'reflect-metadata';
 import { Editor, Field, Schema, FieldType } from '@qwickapps/schema';

package/src/schemas/GridLayoutSchema.ts

@@ -4,7 +4,6 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import type { ReactNode } from 'react';
 import { IsBoolean, IsOptional, IsString, IsNumber, IsIn, Min } from 'class-validator';
 import 'reflect-metadata';
 import { Editor, Field, Schema, FieldType } from '@qwickapps/schema';

package/src/schemas/SectionSchema.ts

@@ -7,7 +7,6 @@
 import { IsOptional, IsString, IsIn } from 'class-validator';
 import 'reflect-metadata';
 import { Editor, Field, Schema, FieldType } from '@qwickapps/schema';
-import { ReactNode } from 'react';
 import { ContainerSchema } from './ContainerSchema';
 
 @Schema('Section', '1.0.0')

package/src/schemas/ViewSchema.ts

@@ -170,7 +170,7 @@ export class ViewSchema extends Model {
   })
   @IsOptional()
   @IsString()
-  height?: string | number;;
+  height?: string | number;
 
   @Field()
   @Editor({
@@ -516,11 +516,11 @@ export class ViewSchema extends Model {
     field_type: FieldType.TEXTAREA,
     label: 'Click Handler',
     description: 'JavaScript function for click events',
-    placeholder: 'function(event) { console.log("clicked"); }'
+    placeholder: 'function(event) { console.debug("clicked"); }'
   })
   @IsOptional()
   @IsString()
-  onClick?: MouseEventHandler<any>;
+  onClick?: MouseEventHandler<unknown>;
 
   @Field()
   @Editor({
@@ -531,7 +531,7 @@ export class ViewSchema extends Model {
   })
   @IsOptional()
   @IsString()
-  onMouseEnter?: MouseEventHandler<any>;
+  onMouseEnter?: MouseEventHandler<unknown>;
 
   @Field()
   @Editor({
@@ -542,7 +542,7 @@ export class ViewSchema extends Model {
   })
   @IsOptional()
   @IsString()
-  onMouseLeave?: MouseEventHandler<any>;
+  onMouseLeave?: MouseEventHandler<unknown>;
 
   @Field()
   @Editor({
@@ -553,7 +553,7 @@ export class ViewSchema extends Model {
   })
   @IsOptional()
   @IsString()
-  onFocus?: FocusEventHandler<any>;
+  onFocus?: FocusEventHandler<unknown>;
 
   @Field()
   @Editor({
@@ -564,7 +564,7 @@ export class ViewSchema extends Model {
   })
   @IsOptional()
   @IsString()
-  onBlur?: FocusEventHandler<any>;
+  onBlur?: FocusEventHandler<unknown>;
 }
 
 export default ViewSchema;

package/src/schemas/transformers/ComponentTransformer.ts

@@ -12,6 +12,7 @@
 import React, { ReactNode, ReactElement } from 'react';
 import { SerializableConstructor } from '../types/Serializable';
 import { ReactNodeTransformer } from './ReactNodeTransformer';
+import SafeSpan from '../../components/SafeSpan';
 
 /**
  * Registry for component classes that support serialization
@@ -26,7 +27,7 @@ const patternRegistry = new Map<string, PatternHandler>();
 /**
  * Type for HTML pattern transformation handlers
  */
-export type PatternHandler = (element: Element) => any;
+export type PatternHandler = (element: Element) => unknown;
 
 /**
  * Strict mode: throw on unregistered components
@@ -77,7 +78,7 @@ export class ComponentTransformer {
       throw new Error(`Component class '${tagName}' must have a static 'version' property`);
     }
 
-    if (typeof (componentClass as any).fromJson !== 'function') {
+    if (typeof (componentClass as { fromJson?: unknown }).fromJson !== 'function') {
       throw new Error(`Component class '${tagName}' must implement static 'fromJson' method`);
     }
 
@@ -85,12 +86,12 @@ export class ComponentTransformer {
       console.warn(`Component '${tagName}' is already registered. Overwriting existing registration.`);
     }
 
-    console.log(`TEST: Registering component: ${tagName} (version ${version})`);
     componentRegistry.set(tagName, componentClass);
 
     // Register HTML patterns if component supports them
-    if (typeof (componentClass as any).registerPatternHandlers === 'function') {
-      (componentClass as any).registerPatternHandlers(ComponentTransformer);
+    const classWithPatterns = componentClass as SerializableConstructor & { registerPatternHandlers?: (transformer: typeof ComponentTransformer) => void };
+    if (typeof classWithPatterns.registerPatternHandlers === 'function') {
+      classWithPatterns.registerPatternHandlers(ComponentTransformer);
     }
   }
 
@@ -100,7 +101,7 @@ export class ComponentTransformer {
    * In legacy mode: uses fallback tag for unregistered components/html/text
    */
   static serialize(node: ReactNode | ReactNode[]): string {
-    const serializedData = ComponentTransformer.serializeNode(node as any);
+    const serializedData = ComponentTransformer.serializeNode(node);
     return JSON.stringify(serializedData);
   }
 
@@ -123,20 +124,20 @@ export class ComponentTransformer {
     }
 
     if (input == null) return null;
-    return ComponentTransformer.deserializeData(input as any);
+    return ComponentTransformer.deserializeData(input);
   }
 
   /**
  * Type guard for serialized component schema objects
- * Requires: { tagName: string; version: string; data: any }
+ * Requires: { tagName: string; version: string; data: unknown }
  * Optional: key?: string
  */
-  private static isSerializedComponent(obj: any): obj is { tagName: string; version: string; data: any; key?: string } {
+  private static isSerializedComponent(obj: unknown): obj is { tagName: string; version: string; data: unknown; key?: string } {
     return !!obj
       && typeof obj === 'object'
-      && typeof (obj as any).tagName === 'string'
-      && typeof (obj as any).version === 'string'
-      && 'data' in (obj as any);
+      && typeof (obj as { tagName?: string }).tagName === 'string'
+      && typeof (obj as { version?: string }).version === 'string'
+      && 'data' in obj;
   }
 
   /**
@@ -144,7 +145,7 @@ export class ComponentTransformer {
    * @param data - Data to deserialize
    * @returns React node(s)
    */
-  private static deserializeData(data: any): ReactNode | ReactNode[] {
+  private static deserializeData(data: unknown): ReactNode | ReactNode[] {
     if (data == null) return null;
 
     // Arrays: map recursively
@@ -178,8 +179,21 @@ export class ComponentTransformer {
       }
     }
 
+    // Handle primitives that are valid React children
+    if (typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') {
+      return data;
+    }
+
+    // For objects, we can't render them directly
     console.warn(`TEST: Unrecognized data:`, data);
-    return String(data);
+
+    // In development, show debug info; in production, return null
+    if (process.env.NODE_ENV !== 'production') {
+      const displayText = typeof data === 'object' ? JSON.stringify(data, null, 2) : String(data);
+      return React.createElement(SafeSpan, { html: `<pre>${displayText}</pre>` });
+    }
+
+    return null;
   }
 
   /**
@@ -187,7 +201,7 @@ export class ComponentTransformer {
    * @param node - React node to serialize
    * @returns Serializable data structure { tagName, version, data }
    */
-  private static serializeNode(node: any): any {
+  private static serializeNode(node: unknown): unknown {
     if (node == null) return null;
 
     // Handle arrays of nodes (produce array of schema objects/null)
@@ -210,15 +224,12 @@ export class ComponentTransformer {
       if (typeof componentType === 'function') {
         const tagName = ComponentTransformer.findTagNameForComponent(componentType);
         if (tagName) {
-          console.log(`TEST: Serializing component instance of ${tagName}:`, element.props);
           const componentClass = componentRegistry.get(tagName)!;
 
-          let serializedData: any = null;
-          console.log(`TEST: Element type:`, typeof (element as any).toJson);
-          console.log(`TEST: Component type:`, typeof (componentClass as any).toJson);
-          if (typeof (componentClass as any).toJson === 'function') {
-            console.log(`TEST: Serializing via component toJson method ${tagName}:`, element.props);
-            serializedData = (componentClass as any).toJson(element.props);
+          let serializedData: unknown = null;
+          const classWithToJson = componentClass as SerializableConstructor & { toJson?: (props: unknown) => unknown };
+          if (typeof classWithToJson.toJson === 'function') {
+            serializedData = classWithToJson.toJson(element.props);
           }
 
           if (serializedData !== null) {
@@ -231,12 +242,13 @@ export class ComponentTransformer {
               ...key,
               ...serializedData
             };
-            console.log(`TEST: Serialized component ${tagName}:`, result);
+            
             return result;
           }
         } else if (strictMode) {
           // In strict mode, throw if we can't find a tag name for the component
-          const componentName = (componentType as any).displayName || (componentType as any).name || 'Unknown';
+          const typeWithName = componentType as { displayName?: string; name?: string };
+          const componentName = typeWithName.displayName || typeWithName.name || 'Unknown';
           throw new Error(`Unregistered component '${componentName}' cannot be serialized in strict mode`);
         }
       }
@@ -251,8 +263,7 @@ export class ComponentTransformer {
       version: FALLBACK_VERSION,
       data: ReactNodeTransformer.serialize(node)
     };
-    console.log(`TEST: Serialized unregistered node as ${FALLBACK_TAG}:`, result, node);
-    console.log(`TEST: Component Registry:`, componentRegistry);
+    
     return result;
   }
 
@@ -261,7 +272,7 @@ export class ComponentTransformer {
    * @param data - Serialized data from ReactNodeTransformer
    * @returns React node
    */
-  private static deserializeUnregisteredComponent(data: any): ReactNode {
+  private static deserializeUnregisteredComponent(data: unknown): ReactNode {
     return ReactNodeTransformer.deserialize(data);
   }
 
@@ -270,7 +281,7 @@ export class ComponentTransformer {
    * @param componentType - Component constructor function
    * @returns Tag name or null if not found
    */
-  private static findTagNameForComponent(componentType: any): string | null {
+  private static findTagNameForComponent(componentType: unknown): string | null {
     // Direct constructor match
     for (const [tagName, registeredClass] of componentRegistry.entries()) {
       if (registeredClass === componentType) return tagName;

package/src/schemas/transformers/ReactNodeTransformer.ts

@@ -21,7 +21,7 @@ export class ReactNodeTransformer {
    * @param node - React node to serialize
    * @returns Serializable data structure
    */
-  static serialize(node: ReactNode): any {
+  static serialize(node: ReactNode): unknown {
     if (node === null || node === undefined) {
       return null;
     }
@@ -45,9 +45,8 @@ export class ReactNodeTransformer {
     // Handle React elements
     if (isValidElement(node)) {
       const element = node as ReactElement;
-      console.log(`TEST: isValidElement:`, element);
 
-      const comp: any = element.type;
+      const comp: unknown = element.type;
       const rawName =
         typeof comp === 'string'
           ? comp
@@ -70,7 +69,7 @@ export class ReactNodeTransformer {
     // Handle plain objects
     if (typeof node === 'object' && node !== null) {
       try {
-        const serialized: any = { type: 'object', data: {} };
+        const serialized: unknown = { type: 'object', data: {} };
         for (const [key, value] of Object.entries(node)) {
           serialized.data[key] = ReactNodeTransformer.serialize(value);
         }
@@ -95,7 +94,7 @@ export class ReactNodeTransformer {
    * @param data - Data to deserialize
    * @returns React node
    */
-  static deserialize(data: any): ReactNode {
+  static deserialize(data: unknown): ReactNode {
     if (data === null || data === undefined) {
       return null;
     }
@@ -110,19 +109,20 @@ export class ReactNodeTransformer {
           return data.value;
 
         case 'array':
-          return data.children?.map((child: any) => ReactNodeTransformer.deserialize(child)) || [];
+          return data.children?.map((child: unknown) => ReactNodeTransformer.deserialize(child)) || [];
 
         case 'react-element':
           return ReactNodeTransformer.deserializeReactElement(data);
 
-        case 'object':
-          const result: any = {};
+        case 'object': {
+          const result: Record<string, unknown> = {};
           if (data.data && typeof data.data === 'object') {
             for (const [key, value] of Object.entries(data.data)) {
               result[key] = ReactNodeTransformer.deserialize(value);
             }
           }
           return result;
+        }
 
         default:
           return String(data.value || data);
@@ -143,12 +143,12 @@ export class ReactNodeTransformer {
    * @param props - Props object to serialize
    * @returns Serialized props
    */
-  private static serializeProps(props: any): any {
+  private static serializeProps(props: unknown): unknown {
     if (!props || typeof props !== 'object') {
       return props;
     }
 
-    const serialized: any = {};
+    const serialized: Record<string, unknown> = {};
     for (const [key, value] of Object.entries(props)) {
       if (key === 'children') {
         // Special handling for children prop
@@ -169,14 +169,15 @@ export class ReactNodeTransformer {
    * @param data - Serialized React element data
    * @returns React element or fallback content
    */
-  private static deserializeReactElement(data: any): ReactNode {
-    const { elementType, props, key } = data;
+  private static deserializeReactElement(data: unknown): ReactNode {
+    const typedData = data as { elementType?: string; props?: unknown; key?: string };
+    const { elementType, props, key } = typedData;
 
     try {
       // Handle HTML elements
       if (typeof elementType === 'string') {
-        const deserializedProps = ReactNodeTransformer.deserializeProps(props);
-        console.log(`TEST: Create Element:`, elementType, deserializedProps);
+        const deserializedProps = ReactNodeTransformer.deserializeProps(props) as Record<string, unknown>;
+
         return createElement(elementType, { key, ...deserializedProps });
       }
     } catch (error) {
@@ -192,12 +193,12 @@ export class ReactNodeTransformer {
    * @param props - Serialized props object
    * @returns Deserialized props
    */
-  private static deserializeProps(props: any): any {
+  private static deserializeProps(props: unknown): unknown {
     if (!props || typeof props !== 'object') {
       return props;
     }
 
-    const deserialized: any = {};
+    const deserialized: Record<string, unknown> = {};
     for (const [key, value] of Object.entries(props)) {
       if (key === 'children') {
         // Special handling for children prop
@@ -215,7 +216,7 @@ export class ReactNodeTransformer {
    * @param props - Props object
    * @returns Text content or null
    */
-  private static extractTextContent(props: any): string | null {
+  private static extractTextContent(props: unknown): string | null {
     if (!props) return null;
 
     if (typeof props.children === 'string') {

package/src/schemas/transformers/registry.ts

@@ -23,7 +23,6 @@ import { SwitchInputField } from '../../components/input/SwitchInputField';
 import { TextInputField } from '../../components/input/TextInputField';
 import { GridCell } from '../../components/layout/GridCell';
 import { GridLayout } from '../../components/layout/GridLayout';
-import { ComponentTransformer } from './ComponentTransformer';
 
 /**
  * Register all serializable components with the ComponentTransformer
@@ -32,41 +31,46 @@ import { ComponentTransformer } from './ComponentTransformer';
  * Phase 0: Foundation in place - ready for component migration
  * Phase 1+: Components will be migrated to createSerializableView factory
  */
+import { ComponentTransformer } from './ComponentTransformer';
+
 export function registerSerializableComponents(): void {
+  // Type for serializable components
+  type SerializableComponent = { tagName: string; version: string; fromJson: (data: unknown) => React.ReactElement };
+
   // Register Container component - Base layout component with child serialization support
-  ComponentTransformer.registerComponent(Container as any);
+  ComponentTransformer.registerComponent(Container as unknown as SerializableComponent);
 
   // Register Code component - First production component with serialization support
-  ComponentTransformer.registerComponent(Code as any);
-  
+  ComponentTransformer.registerComponent(Code as unknown as SerializableComponent);
+
   // Register Section component - Layout container component with child serialization support
-  ComponentTransformer.registerComponent(Section as any);
-  
+  ComponentTransformer.registerComponent(Section as unknown as SerializableComponent);
+
   // Register Button component - Interactive component with action serialization support
-  ComponentTransformer.registerComponent(Button as any);
-  
+  ComponentTransformer.registerComponent(Button as unknown as SerializableComponent);
+
   // Register Image component - Display component with comprehensive image handling and serialization support
-  ComponentTransformer.registerComponent(Image as any);
-  
+  ComponentTransformer.registerComponent(Image as unknown as SerializableComponent);
+
   // Register Text component - Typography component with comprehensive text styling and serialization support
-  ComponentTransformer.registerComponent(Text as any);
-  
+  ComponentTransformer.registerComponent(Text as unknown as SerializableComponent);
+
   // Register HeroBlock component - Full-width hero section with nested component serialization support
-  ComponentTransformer.registerComponent(HeroBlock as any);
-  
+  ComponentTransformer.registerComponent(HeroBlock as unknown as SerializableComponent);
+
   // Register GridLayout component - Flexible grid layout with nested component serialization support
-  ComponentTransformer.registerComponent(GridLayout as any);
-  
+  ComponentTransformer.registerComponent(GridLayout as unknown as SerializableComponent);
+
   // Register GridCell component - Grid cell wrapper with nested component serialization support
-  ComponentTransformer.registerComponent(GridCell as any);
-  
+  ComponentTransformer.registerComponent(GridCell as unknown as SerializableComponent);
+
   // Register Form Components - Complete form field components with serialization support
-  ComponentTransformer.registerComponent(TextInputField as any);
-  ComponentTransformer.registerComponent(SelectInputField as any);
-  ComponentTransformer.registerComponent(HtmlInputField as any);
-  ComponentTransformer.registerComponent(ChoiceInputField as any);
-  ComponentTransformer.registerComponent(SwitchInputField as any);
-  ComponentTransformer.registerComponent(FormBlock as any);
+  ComponentTransformer.registerComponent(TextInputField as unknown as SerializableComponent);
+  ComponentTransformer.registerComponent(SelectInputField as unknown as SerializableComponent);
+  ComponentTransformer.registerComponent(HtmlInputField as unknown as SerializableComponent);
+  ComponentTransformer.registerComponent(ChoiceInputField as unknown as SerializableComponent);
+  ComponentTransformer.registerComponent(SwitchInputField as unknown as SerializableComponent);
+  ComponentTransformer.registerComponent(FormBlock as unknown as SerializableComponent);
   
   // Future components will be registered here as they implement Serializable
   // etc.

package/src/schemas/types/Serializable.ts

@@ -19,7 +19,7 @@ export interface Serializable {
    * Convert component instance to JSON data
    * @returns Serializable data structure
    */
-  toJson(): any;
+  toJson(): unknown;
 }
 
 /**
@@ -45,7 +45,7 @@ export interface SerializableConstructor {
    * @param jsonData - Serialized component data
    * @returns React element representing the component
    */
-  fromJson(jsonData: any): ReactElement;
+  fromJson(jsonData: unknown): ReactElement;
   
-  new (...args: any[]): Serializable;
+  new (...args: unknown[]): Serializable;
 }

package/src/setupTests.js

@@ -1,6 +1,15 @@
 // Jest setup for QwickApps Theme System tests
 import '@testing-library/jest-dom';
 
+// Mock paletteLoader to avoid import.meta.env issues in Jest
+jest.mock('./utils/paletteLoader', () => ({
+  loadPalette: jest.fn().mockResolvedValue(undefined),
+  loadPaletteSync: jest.fn(),
+  isPaletteLoaded: jest.fn().mockReturnValue(true),
+  getLoadedPalettes: jest.fn().mockReturnValue([]),
+  preloadPalettes: jest.fn().mockResolvedValue(undefined),
+}));
+
 // Mock CSS imports for components
 jest.mock('./components/QwickApp.css', () => ({}));
 jest.mock('./components/Logo.css', () => ({}));

package/src/stories/AccessibilityProvider.stories.tsx

@@ -13,7 +13,6 @@ const AccessibilityDemo = () => {
  setHighContrast,
  setReducedMotion,
  setLargeText,
- announce,
  announcePolite,
  announceAssertive,
  runAudit,

package/src/stories/Article.stories.tsx

@@ -58,7 +58,7 @@ function MyApp() {
  <ProductCard dataSource="products.featured" />
 &lt;/QwickApp&gt;</code></pre>
 
- <p>You can also use inline code like <code>console.log('hello')</code> within paragraphs.</p>
+ <p>You can also use inline code like <code>console.debug('hello')</code> within paragraphs.</p>
  
  <h2>Complex Multi-line Code</h2>
  <code>

package/src/stories/CardListGrid.stories.tsx

@@ -197,7 +197,7 @@ export const FeatureGrid: Story = {
 
 export const CustomRenderFunction: Story = {
  render: () => {
- const customRenderItem = (item: any, index: number) => (
+ const customRenderItem = (item: { id?: string; title?: string; description?: string }, index: number) => (
  <Box 
  key={item.id || index}
  sx={{ 

package/src/stories/ChoiceInputField.stories.tsx

@@ -198,12 +198,12 @@ function InteractiveChoiceExample({
  const newOptions = [...options];
  newOptions[optionIndex] = value;
  setOptions(newOptions);
- console.log('Option changed:', { optionIndex, value, allOptions: newOptions });
+ console.debug('Option changed:', { optionIndex, value, allOptions: newOptions });
  };
  
  const handleAddOption = () => {
  setOptions([...options, '']);
- console.log('Added new option, total:', options.length + 1);
+ console.debug('Added new option, total:', options.length + 1);
  };
  
  return (

package/src/stories/Code.stories.tsx

@@ -4,12 +4,11 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Alert, Box, Divider, Paper, Typography } from '@mui/material';
+import { Box, Divider, Typography } from '@mui/material';
 import { JsonDataProvider } from '@qwickapps/schema';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Code } from '../components/blocks';
 import QwickApp from '../components/QwickApp';
-import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
 import { makeSerializationStory } from './_templates/SerializationTemplate';
 
 // Sample code content for different languages
@@ -661,7 +660,7 @@ export const SerializationDemo: Story = {
       wrapLines={false}
       codeBackground="linear-gradient(135deg, #667eea20, #764ba220)"
       sx={{ mb: 2, border: "1px solid #ddd" }}
-      onClick={(event) => { console.log("Code component clicked!"); }}
+      onClick={() => { console.log("Code component clicked!"); }}
       role="region"
       aria-label="TypeScript code demonstration"
       data-testid="serializable-code-block"