@qwickapps/react-framework 1.4.9 → 1.5.0

package/src/hooks/useDataBinding.ts

@@ -8,7 +8,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { DataBindingMeta, DataBindingOptions, Model, SchemaDefinition } from '@qwickapps/schema';
+import { DataBindingMeta, Model } from '@qwickapps/schema';
 import { useMemo } from 'react';
 import { useDataSafe } from '../contexts/DataContext';
 
@@ -23,15 +23,13 @@ import { useDataSafe } from '../contexts/DataContext';
  */
 export function useDataBinding<T extends Model>(
   dataSource?: string,
-  fallbackProps?: Partial<T>,
-  schema?: SchemaDefinition,
-  options?: DataBindingOptions
+  fallbackProps?: Partial<T>
 ): T & DataBindingMeta {
   // Determine if we should use data binding
   const isDataSourceAvailable = dataSource && dataSource.trim().length > 0;
 
-  // Get data if dataSource is provided
-  const safeDataResult = isDataSourceAvailable ? useDataSafe(dataSource) : { data: undefined, loading: false, error: null };
+  // Get data - always call the hook unconditionally, but pass empty string if not available
+  const safeDataResult = useDataSafe(isDataSourceAvailable ? dataSource : '');
 
   // Resolve the final props
   const resolvedData = useMemo(() => {
@@ -46,16 +44,15 @@ export function useDataBinding<T extends Model>(
     } as Partial<T>;
 
     return resolved;
+  }, [isDataSourceAvailable, safeDataResult.data, fallbackProps]);
 
-  }, [isDataSourceAvailable, safeDataResult.data, fallbackProps, schema, options]);
-
-  // Build the data binding metadata
-  const metadata: DataBindingMeta = {
-    loading: safeDataResult.loading,
-    error: safeDataResult.error,
-    dataSource,
-    cached: false // TODO: Implement cache detection
-  };
+  // Build the data binding metadata (not currently returned but available for future use)
+  // const metadata: DataBindingMeta = {
+  //   loading: safeDataResult.loading,
+  //   error: safeDataResult.error,
+  //   dataSource,
+  //   cached: false // TODO: Implement cache detection
+  // };
 
   // Return resolved data with metadata, ensuring data properties aren't overridden
   return {
@@ -66,10 +63,10 @@ export function useDataBinding<T extends Model>(
     $dataSource: dataSource,
     $cached: false,
     // Keep old names for backward compatibility, but data takes precedence
-    ...(resolvedData.hasOwnProperty('loading') ? {} : { loading: safeDataResult.loading }),
-    ...(resolvedData.hasOwnProperty('error') ? {} : { error: safeDataResult.error }),
+    ...(Object.prototype.hasOwnProperty.call(resolvedData, 'loading') ? {} : { loading: safeDataResult.loading }),
+    ...(Object.prototype.hasOwnProperty.call(resolvedData, 'error') ? {} : { error: safeDataResult.error }),
     cached: false
-  } as any;
+  } as T & DataBindingMeta;
 }
 
 // Old validation function removed - using new schema system

package/src/hooks/usePrintMode.ts

@@ -43,11 +43,11 @@ export interface PrintModeState {
 
 /**
  * Hook to access print mode state from app-level context
- * 
- * @param initialConfig - Initial print configuration (ignored, use context provider config)
+ *
+ * @param _initialConfig - Initial print configuration (ignored, use context provider config)
  * @returns Print mode state and controls
  */
-export function usePrintMode(initialConfig?: Partial<PrintConfigSchema>): PrintModeState {
+export function usePrintMode(): PrintModeState {
   const context = usePrintModeContext();
   
   // Map context interface to legacy interface

package/src/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 // QwickApps React Framework
 // Main export file for the QwickApps React Framework
 

package/src/palettes/manifest.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "./manifest.schema.json",
+  "version": "1.4.9",
+  "palettes": [
+    {
+      "id": "default",
+      "name": "Default",
+      "description": "Classic blue and neutral color scheme - the original QwickApps palette",
+      "author": "QwickApps",
+      "license": "PolyForm-Shield-1.0.0",
+      "version": "1.4.9",
+      "file": "PaletteDefault.css",
+      "primaryColor": "#007bff",
+      "inlined": true
+    },
+    {
+      "id": "autumn",
+      "name": "Autumn",
+      "description": "Warm oranges, golden yellows, and earthy browns - inspired by fall foliage",
+      "author": "QwickApps",
+      "license": "PolyForm-Shield-1.0.0",
+      "version": "1.4.9",
+      "file": "PaletteAutumn.css",
+      "primaryColor": "#ea580c",
+      "inlined": false
+    },
+    {
+      "id": "cosmic",
+      "name": "Cosmic",
+      "description": "Modern purple gradient for creative and tech brands - inspired by cosmic nebulae",
+      "author": "QwickApps",
+      "license": "PolyForm-Shield-1.0.0",
+      "version": "1.4.9",
+      "file": "PaletteCosmic.css",
+      "primaryColor": "#8b5cf6",
+      "inlined": false
+    },
+    {
+      "id": "ocean",
+      "name": "Ocean",
+      "description": "Deep blues, aqua teals, and seafoam greens - inspired by ocean depths",
+      "author": "QwickApps",
+      "license": "PolyForm-Shield-1.0.0",
+      "version": "1.4.9",
+      "file": "PaletteOcean.css",
+      "primaryColor": "#0891b2",
+      "inlined": false
+    },
+    {
+      "id": "spring",
+      "name": "Spring",
+      "description": "Fresh greens, soft pinks, and bright yellows - inspired by spring blooms",
+      "author": "QwickApps",
+      "license": "PolyForm-Shield-1.0.0",
+      "version": "1.4.9",
+      "file": "PaletteSpring.css",
+      "primaryColor": "#16a34a",
+      "inlined": false
+    },
+    {
+      "id": "winter",
+      "name": "Winter",
+      "description": "Cool blues, icy whites, and frosty grays - inspired by winter landscapes",
+      "author": "QwickApps",
+      "license": "PolyForm-Shield-1.0.0",
+      "version": "1.4.9",
+      "file": "PaletteWinter.css",
+      "primaryColor": "#0077be",
+      "inlined": false
+    }
+  ]
+}

package/src/palettes/manifest.schema.json

@@ -0,0 +1,74 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "QwickApps Palette Manifest",
+  "description": "Manifest file describing available color palettes for QwickApps React Framework",
+  "type": "object",
+  "required": ["version", "palettes"],
+  "properties": {
+    "version": {
+      "type": "string",
+      "description": "Version of the manifest/framework",
+      "pattern": "^\\d+\\.\\d+\\.\\d+$"
+    },
+    "palettes": {
+      "type": "array",
+      "description": "List of available color palettes",
+      "items": {
+        "type": "object",
+        "required": ["id", "name", "description", "version", "file", "primaryColor"],
+        "properties": {
+          "id": {
+            "type": "string",
+            "description": "Unique identifier for the palette (kebab-case)",
+            "pattern": "^[a-z][a-z0-9-]*$"
+          },
+          "name": {
+            "type": "string",
+            "description": "Human-readable name of the palette"
+          },
+          "description": {
+            "type": "string",
+            "description": "Brief description of the palette theme"
+          },
+          "author": {
+            "type": "string",
+            "description": "Author or organization that created the palette"
+          },
+          "license": {
+            "type": "string",
+            "description": "License under which the palette is distributed"
+          },
+          "version": {
+            "type": "string",
+            "description": "Version of the palette",
+            "pattern": "^\\d+\\.\\d+\\.\\d+$"
+          },
+          "file": {
+            "type": "string",
+            "description": "Filename of the palette CSS (unminified)",
+            "pattern": "^palette-[a-z][a-z0-9-]*\\.\\d+\\.\\d+\\.\\d+\\.css$"
+          },
+          "fileMinified": {
+            "type": "string",
+            "description": "Filename of the minified palette CSS",
+            "pattern": "^palette-[a-z][a-z0-9-]*\\.\\d+\\.\\d+\\.\\d+\\.min\\.css$"
+          },
+          "thumbnail": {
+            "type": "string",
+            "description": "Filename of the palette thumbnail image"
+          },
+          "primaryColor": {
+            "type": "string",
+            "description": "Primary color of the palette (hex format)",
+            "pattern": "^#[0-9a-fA-F]{6}$"
+          },
+          "inlined": {
+            "type": "boolean",
+            "description": "Whether this palette is inlined in the main CSS bundle",
+            "default": false
+          }
+        }
+      }
+    }
+  }
+}

package/src/schemas/CardListGridSchema.ts

@@ -4,7 +4,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { IsArray, IsOptional, IsNumber, IsIn, IsBoolean, IsObject, IsString } from 'class-validator';
+import { IsArray, IsOptional, IsNumber, IsIn, IsBoolean, IsObject } from 'class-validator';
 import 'reflect-metadata';
 import { Editor, Field, Schema, FieldType } from '@qwickapps/schema';
 import { ContainerSchema } from './ContainerSchema';
@@ -18,7 +18,7 @@ export class CardListGridModel extends ContainerSchema {
     description: 'Array of items to display in the grid'
   })
   @IsArray()
-  items?: any[];
+  items?: unknown[];
 
   @Field()
   @Editor({
@@ -96,7 +96,7 @@ export class CardListGridModel extends ContainerSchema {
   })
   @IsOptional()
   @IsObject()
-  itemProps?: Record<string, any>;
+  itemProps?: Record<string, unknown>;
 }
 
 

package/src/schemas/CodeSchema.ts

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

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({
@@ -520,7 +520,7 @@ export class ViewSchema extends Model {
   })
   @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`);
     }
 
@@ -88,8 +89,9 @@ export class ComponentTransformer {
     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);
     }
   }
 
@@ -99,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);
   }
 
@@ -122,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;
   }
 
   /**
@@ -143,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
@@ -177,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;
   }
 
   /**
@@ -186,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)
@@ -211,9 +226,10 @@ export class ComponentTransformer {
         if (tagName) {
           const componentClass = componentRegistry.get(tagName)!;
 
-          let serializedData: any = null;
-          if (typeof (componentClass as any).toJson === 'function') {
-            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,7 +247,8 @@ export class ComponentTransformer {
           }
         } 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`);
         }
       }
@@ -255,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);
   }
 
@@ -264,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;
     }
@@ -46,7 +46,7 @@ export class ReactNodeTransformer {
     if (isValidElement(node)) {
       const element = node as ReactElement;
 
-      const comp: any = element.type;
+      const comp: unknown = element.type;
       const rawName =
         typeof comp === 'string'
           ? comp
@@ -69,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);
         }
@@ -94,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;
     }
@@ -109,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);
@@ -142,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
@@ -168,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);
-        
+        const deserializedProps = ReactNodeTransformer.deserializeProps(props) as Record<string, unknown>;
+
         return createElement(elementType, { key, ...deserializedProps });
       }
     } catch (error) {
@@ -191,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
@@ -214,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') {