@qwickapps/react-framework 1.4.8 → 1.5.0

package/src/components/layout/GridLayout.tsx

@@ -16,10 +16,9 @@
  */
 
 import React from 'react';
-import { Grid, SxProps, Theme } from '@mui/material';
-import { SpacingValue, resolveSpacing } from '../../utils/spacing';
-import { DimensionValue, resolveDimension } from '../../utils/dimensions';
-import { QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+import { Grid } from '@mui/material';
+import { resolveSpacing } from '../../utils/spacing';
+import { resolveDimension } from '../../utils/dimensions';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 
@@ -66,9 +65,9 @@ function GridLayoutView({
   maxWidth,
   gridProps,
   ...props
-}: GridLayoutProps & { gridProps?: any }) {
+}: GridLayoutProps & { gridProps?: unknown }) {
   
-  const resolvedSpacing = resolveSpacing(spacing, 'gap');
+  const resolvedSpacing = resolveSpacing(spacing);
   
   // Process children to handle grid props
   const processChildren = () => {
@@ -80,73 +79,71 @@ function GridLayoutView({
       }
 
       // Extract grid props from data attributes or props
-      let gridProps: any = {};
-      
-      // Check if it's a QwickApp component
-      const isQwickApp = (child.type as any)?.[QWICKAPP_COMPONENT];
-      
+      let childGridProps: Record<string, unknown> = {};
+
       // Extract grid props from both data attributes (QwickApp) and direct props (regular)
-      const props = child.props as any;
-      const span = props['data-grid-span'] || props.span;
-      const xs = props['data-grid-xs'] || props.xs;
-      const sm = props['data-grid-sm'] || props.sm;
-      const md = props['data-grid-md'] || props.md;
-      const lg = props['data-grid-lg'] || props.lg;
-      const xl = props['data-grid-xl'] || props.xl;
-      
+      const childProps = child.props as Record<string, unknown>;
+      const span = childProps['data-grid-span'] || childProps.span;
+      const xs = childProps['data-grid-xs'] || childProps.xs;
+      const sm = childProps['data-grid-sm'] || childProps.sm;
+      const md = childProps['data-grid-md'] || childProps.md;
+      const lg = childProps['data-grid-lg'] || childProps.lg;
+      const xl = childProps['data-grid-xl'] || childProps.xl;
+
       if (span || xs || sm || md || lg || xl) {
         // Use span if available, otherwise use breakpoint values
         if (span) {
-          gridProps = {
+          childGridProps = {
             size: span,
           };
         } else {
           // Build responsive size object for MUI v6
-          const sizeConfig: any = {};
+          const sizeConfig: Record<string, unknown> = {};
           if (xs) sizeConfig.xs = xs;
           if (sm) sizeConfig.sm = sm;
           if (md) sizeConfig.md = md;
           if (lg) sizeConfig.lg = lg;
           if (xl) sizeConfig.xl = xl;
-          
-          gridProps = {
+
+          childGridProps = {
             size: sizeConfig,
           };
         }
       }
 
       // If columns prop is set and no grid props, auto-distribute responsively
-      if (columns && Object.keys(gridProps).length === 0) {
+      if (columns && Object.keys(childGridProps).length === 0) {
         // Make responsive: single column on mobile, fewer columns on tablet, full columns on desktop
-        gridProps = {
+        childGridProps = {
           size: {
             xs: 12, // Single column on mobile
             sm: columns >= 3 ? 6 : 12 / Math.min(columns, 2), // 2 columns max on small screens
-            md: 12 / Math.min(columns, 3), // 3 columns max on medium screens  
+            md: 12 / Math.min(columns, 3), // 3 columns max on medium screens
             lg: 12 / columns, // Full columns on large screens
           },
         };
       }
 
       // If has grid props, wrap in Grid
-      if (Object.keys(gridProps).length > 0) {
+      if (Object.keys(childGridProps).length > 0) {
         // Clean grid data attributes from child to avoid duplication
-        const cleanedProps = { ...child.props };
+        const cleanedProps = { ...(child.props as Record<string, unknown>) };
         delete cleanedProps['data-grid-span'];
         delete cleanedProps['data-grid-xs'];
         delete cleanedProps['data-grid-sm'];
         delete cleanedProps['data-grid-md'];
         delete cleanedProps['data-grid-lg'];
         delete cleanedProps['data-grid-xl'];
-        
+
         return (
-          <Grid key={child.key || index} {...gridProps}>
+          <Grid key={child.key || index} {...childGridProps}>
             {React.cloneElement(child, cleanedProps)}
           </Grid>
         );
       }
 
-      return child;
+      // Return child wrapped in Fragment with key
+      return <React.Fragment key={child.key || index}>{child}</React.Fragment>;
     });
   };
 
@@ -155,7 +152,7 @@ function GridLayoutView({
       container
       spacing={resolvedSpacing}
       {...props}
-      {...(gridProps && { 'data-grid': JSON.stringify(gridProps) })}
+      {...(gridProps ? { 'data-grid': JSON.stringify(gridProps) } : {})}
       sx={{
         width: '100%', // Ensure full width by default in MUI v6
         height: resolveDimension(height, 'height'),

package/src/components/menu/MenuItem.tsx

@@ -13,8 +13,8 @@ export interface MenuItem {
   id: string;
   /** Display label for the menu item */
   label: string;
-  /** Icon component or JSX element to display */
-  icon?: React.ReactNode;
+  /** Icon name (string) or icon component (React.ReactNode) to display */
+  icon?: string | React.ReactNode;
   /** Click handler for the menu item */
   onClick?: () => void;
   /** External link URL (if this is a link) */

package/src/components/pages/FormPage.tsx

@@ -86,7 +86,6 @@ export const FormPage: React.FC<FormPageProps> = ({
   maxWidth = 'sm',
   background = 'default',
   backgroundImage,
-  sx = {},
 }) => {
   return (
     <FormBlock

package/src/components/pages/Page.tsx

@@ -223,7 +223,7 @@ export const PageView: React.FC<PageViewProps> = ({
     if (!isPrintMode) return;
     const styleId = 'qwickapps-print-page-setup';
     const cfg = printConfig;
-    const size = (cfg as any).pageSize || 'auto';
+    const size = (cfg as unknown as { pageSize?: string }).pageSize || 'auto';
     const bg = cfg.printBackground || 'transparent';
     const bgFirst = cfg.printBackgroundFirstPage || bg;
 
@@ -366,7 +366,7 @@ export const PageView: React.FC<PageViewProps> = ({
 /* -------------------------------------------------------------------------- */
 /* Page Class                                                                 */
 /* -------------------------------------------------------------------------- */
-export class Page<P extends PageProps = PageProps, S = {}> extends React.Component<P, S> {
+export class Page<P extends PageProps = PageProps, S = Record<string, never>> extends React.Component<P, S> {
   protected getPageProps(): Partial<PageProps> { return {}; }
   protected renderView(): React.ReactNode { return this.props.children; }
   protected renderPrintView(): React.ReactNode { return this.renderView(); }

package/src/components/shared/createSerializableView.tsx

@@ -57,12 +57,11 @@ interface CreateSerializableViewConfig<P extends ViewProps> {
 /**
  * Serializable component interface with all required static properties
  */
-export interface SerializableComponent<P extends ViewProps> {
-  (props: P): ReactElement;
+export interface SerializableComponent<P extends ViewProps> extends React.FC<P> {
   tagName: string;
   version: string;
-  fromJson: (data: any) => ReactElement;
-  toJson: (props: P) => any;
+  fromJson: (data: unknown) => ReactElement;
+  toJson: (props: P) => unknown;
   displayName?: string;
   [QWICKAPP_COMPONENT]: symbol;
 }
@@ -80,7 +79,7 @@ export function createSerializableView<P extends ViewProps>(
 
   // Create the main component function
   function SerializableViewComponent(props: P): ReactElement {
-    const { dataSource, bindingOptions, children, ...schemaProps } = props as any;
+    const { dataSource, bindingOptions, children, ...schemaProps } = props as P & { dataSource?: string; bindingOptions?: Record<string, unknown>; children?: ReactNode };
 
     // Step 1: Handle content-prop strategy (map JSX children → content)
     let propsForProcessing = schemaProps;
@@ -162,14 +161,15 @@ export function createSerializableView<P extends ViewProps>(
   component[QWICKAPP_COMPONENT] = QWICKAPP_COMPONENT;
 
   // Serialization methods
-  component.fromJson = function fromJson(data: any): ReactElement {
-    const { tagName: dataTagName, version: dataVersion, data: componentData } = data;
-    
+  component.fromJson = function fromJson(data: unknown): ReactElement {
+    const typedData = data as { tagName?: string; version?: string; data?: unknown };
+    const { tagName: dataTagName, version: dataVersion, data: componentData } = typedData;
+
     // Validate deserialization data
     if (dataTagName !== tagName) {
       throw new Error(`Tag name mismatch: expected ${tagName}, got ${dataTagName}`);
     }
-    
+
     if (dataVersion !== version) {
       console.warn(`Version mismatch for ${tagName}: expected ${version}, got ${dataVersion}`);
     }
@@ -177,30 +177,31 @@ export function createSerializableView<P extends ViewProps>(
     // Handle deserialization based on children strategy
     if (childrenStrategy.mode === 'content-prop') {
       const propName = childrenStrategy.propName || 'content';
-      const { children: _ignored, ...rest } = componentData || {};
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { children, ...rest } = componentData || {};
       const contentData = { ...rest, [propName]: componentData?.[propName] || '' };
       return React.createElement(component as ComponentType<P>, contentData as P);
     } else {
       // For react-children strategy, recursively deserialize children
-      const deserializedData = { ...componentData };
-      if (componentData.children !== undefined) {
-        // Import ComponentTransformer here to avoid circular dependency
-        const { ComponentTransformer } = require('../../schemas/transformers/ComponentTransformer');
-        deserializedData.children = ComponentTransformer.deserialize(componentData.children);
+      const deserializedData = { ...(componentData as Record<string, unknown>) };
+      if ((componentData as Record<string, unknown>).children !== undefined) {
+        // Recursively deserialize children using ComponentTransformer
+        deserializedData.children = ComponentTransformer.deserialize((componentData as Record<string, unknown>).children);
       }
       return React.createElement(component as ComponentType<P>, deserializedData as P);
     }
   };
 
-  component.toJson = function toJson(props: P): any {
+  component.toJson = function toJson(props: P): unknown {
     // Handle serialization based on children strategy
     if (childrenStrategy.mode === 'content-prop') {
       const propName = childrenStrategy.propName || 'content';
-      const { children: _ignored, ...rest } = props || {};
-      const contentValue = (props as any)?.[propName] ?? toText((props as any)?.children);
-      
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { children, ...rest } = props || {};
+      const contentValue = (props as Record<string, unknown>)?.[propName] ?? toText((props as Record<string, unknown>)?.children as ReactNode);
+
       // Clean props for content-prop serialization
-      const cleanProps: any = {};
+      const cleanProps: Record<string, unknown> = {};
       for (const [key, value] of Object.entries(rest)) {
         if (typeof value === 'function' && key.startsWith('on')) {
           cleanProps[key] = value.toString();
@@ -216,7 +217,7 @@ export function createSerializableView<P extends ViewProps>(
       };
     } else {
       // Handle react-children strategy (existing logic)
-      const cleanProps: any = {};
+      const cleanProps: unknown = {};
       
       for (const [key, value] of Object.entries(props)) {
         if (typeof value === 'function' && key.startsWith('on')) {
@@ -257,7 +258,7 @@ export type SerializableViewComponent<P extends ViewProps> = SerializableCompone
 /**
  * Type guard to check if a component is serializable
  */
-export function isSerializableComponent(component: any): component is SerializableComponent<any> {
+export function isSerializableComponent(component: unknown): component is SerializableComponent<unknown> {
   return component && 
     typeof component === 'function' &&
     typeof component.tagName === 'string' &&
@@ -270,7 +271,7 @@ export function isSerializableComponent(component: any): component is Serializab
 /**
  * Extract component metadata for registration
  */
-export function getComponentMetadata(component: SerializableComponent<any>) {
+export function getComponentMetadata(component: SerializableComponent<unknown>) {
   return {
     tagName: component.tagName,
     version: component.version,

package/src/components/shared/viewProps.ts

@@ -29,17 +29,17 @@ export interface ViewProps extends SchemaProps<ViewSchema>, WithDataBinding {
 /**
  * Type for string event handlers in schema
  */
-type EventHandlerValue = string | React.MouseEventHandler<any> | React.FocusEventHandler<any> | undefined;
+type EventHandlerValue = string | React.MouseEventHandler<unknown> | React.FocusEventHandler<unknown> | undefined;
 
 /**
  * Runtime event handler conversion map
  */
 interface EventHandlers {
-  onClick?: React.MouseEventHandler<any>;
-  onMouseEnter?: React.MouseEventHandler<any>;
-  onMouseLeave?: React.MouseEventHandler<any>;
-  onFocus?: React.FocusEventHandler<any>;
-  onBlur?: React.FocusEventHandler<any>;
+  onClick?: React.MouseEventHandler<unknown>;
+  onMouseEnter?: React.MouseEventHandler<unknown>;
+  onMouseLeave?: React.MouseEventHandler<unknown>;
+  onFocus?: React.FocusEventHandler<unknown>;
+  onBlur?: React.FocusEventHandler<unknown>;
 }
 
 /**
@@ -49,21 +49,21 @@ interface EventHandlers {
  */
 function parseEventHandlers(eventHandlers: Record<string, EventHandlerValue>): EventHandlers {
   const result: EventHandlers = {};
-  
+
   for (const [key, value] of Object.entries(eventHandlers)) {
     if (typeof value === 'string' && value.trim()) {
       try {
         // Convert string to function - safe eval for event handlers
         // This creates a function that executes the string as code
         const func = new Function('event', value);
-        result[key as keyof EventHandlers] = func as any;
+        result[key as keyof EventHandlers] = func as React.MouseEventHandler<unknown> | React.FocusEventHandler<unknown>;
       } catch (error) {
         console.warn(`Invalid event handler string for ${key}:`, value, error);
         // Keep as undefined for invalid handlers
       }
     } else if (typeof value === 'function') {
       // Already a function, use as-is
-      result[key as keyof EventHandlers] = value as any;
+      result[key as keyof EventHandlers] = value as React.MouseEventHandler<unknown> | React.FocusEventHandler<unknown>;
     }
   }
   
@@ -187,7 +187,7 @@ export function normalizeViewProps<T extends ViewProps>(props: T): T & BaseCompo
   };
 
   // Canonicalize background prop (backgroundColor → background)
-  const canonicalBackground = (restProps as any).background ?? backgroundColor;
+  const canonicalBackground = (restProps as { background?: string }).background ?? backgroundColor;
 
   // Return normalized props with proper typing
   const normalized = {
@@ -201,7 +201,7 @@ export function normalizeViewProps<T extends ViewProps>(props: T): T & BaseCompo
   } as T & BaseComponentProps;
 
   // Remove backgroundColor to avoid duplication
-  delete (normalized as any).backgroundColor;
+  delete (normalized as T & BaseComponentProps & { backgroundColor?: string }).backgroundColor;
   
   return normalized;
 }

package/src/config/AppConfig.ts

@@ -73,7 +73,7 @@ export class AppConfig implements IAppConfig {
   /**
    * Generate PWA manifest
    */
-  get pwaManifest(): Record<string, any> {
+  get pwaManifest(): Record<string, unknown> {
     return {
       name: this.app.name,
       short_name: this.app.shortName,
@@ -102,7 +102,7 @@ export class AppConfig implements IAppConfig {
   /**
    * Convert to plain object (for serialization)
    */
-  toJSON(): Record<string, any> {
+  toJSON(): Record<string, unknown> {
     return {
       app: this.app,
       build: this.build,

package/src/config/__tests__/AppConfig.test.ts

@@ -79,11 +79,11 @@ describe('AppConfig', () => {
 
       // Attempt to modify should fail
       expect(() => {
-        (config.app as any).name = 'Modified Name';
+        (config.app as { name: string }).name = 'Modified Name';
       }).toThrow();
 
       expect(() => {
-        (config.build as any).port = 4000;
+        (config.build as { port: number }).port = 4000;
       }).toThrow();
     });
   });
@@ -319,7 +319,7 @@ describe('AppConfig', () => {
       });
 
       expect(() => {
-        (newConfig.app as any).name = 'Another Name';
+        (newConfig.app as { name: string }).name = 'Another Name';
       }).toThrow();
     });
   });

package/src/config/__tests__/AppConfigBuilder.test.ts

@@ -7,7 +7,6 @@
  */
 
 import * as fs from 'fs';
-import * as path from 'path';
 import { AppConfigBuilder } from '../AppConfigBuilder';
 import { AppConfig } from '../AppConfig';
 
@@ -164,7 +163,7 @@ describe('AppConfigBuilder', () => {
         AppConfigBuilder.create()
           .withName('Test App')
           .withId('test-app')
-          .withPort(3000.5 as any)
+          .withPort(3000.5 as unknown as number)
           .build();
       }).toThrow('Port must be a valid integer between 1 and 65535');
     });
@@ -206,9 +205,9 @@ describe('AppConfigBuilder', () => {
     });
 
     it('should skip validation when skipValidation option is true', () => {
-      const consoleWarn = jest.spyOn(console, 'warn').mockImplementation();
+      jest.spyOn(console, 'warn').mockImplementation();
 
-      const config = AppConfigBuilder.create()
+      AppConfigBuilder.create()
         .withOptions({ skipValidation: true })
         .withName('Test App')
         .withId('test-app')
@@ -241,9 +240,9 @@ describe('AppConfigBuilder', () => {
     });
 
     it('should accept named colors', () => {
-      const consoleWarn = jest.spyOn(console, 'warn').mockImplementation();
+      jest.spyOn(console, 'warn').mockImplementation();
 
-      const config = AppConfigBuilder.create()
+      AppConfigBuilder.create()
         .withName('Test App')
         .withId('test-app')
         .withThemeColor('red')
@@ -258,7 +257,7 @@ describe('AppConfigBuilder', () => {
     it('should warn for potentially invalid colors', () => {
       const consoleWarn = jest.spyOn(console, 'warn').mockImplementation();
 
-      const config = AppConfigBuilder.create()
+      AppConfigBuilder.create()
         .withName('Test App')
         .withId('test-app')
         .withThemeColor('invalid-color')
@@ -330,7 +329,7 @@ describe('AppConfigBuilder', () => {
         throw new Error('File not found');
       });
 
-      const config = AppConfigBuilder.create()
+      AppConfigBuilder.create()
         .withConfig('./missing.json')
         .withName('Test App')
         .withId('test-app')
@@ -403,7 +402,7 @@ describe('AppConfigBuilder', () => {
         AppConfigBuilder.create()
           .withPort(0)
           .build();
-      } catch (error: any) {
+      } catch (error: unknown) {
         const message = error.message;
         expect(message).toContain('App name is required');
         expect(message).toContain('App ID is required');
@@ -421,11 +420,11 @@ describe('AppConfigBuilder', () => {
 
       // Attempt to modify the configuration should not work
       expect(() => {
-        (config.app as any).name = 'Modified Name';
+        (config.app as { name: string }).name = 'Modified Name';
       }).toThrow();
 
       expect(() => {
-        (config as any).app = { name: 'New App' };
+        (config as { app: unknown }).app = { name: 'New App' };
       }).toThrow();
     });
   });

package/src/config/types.ts

@@ -32,7 +32,7 @@ export interface AppConfig {
   readonly viteConfig: ViteUserConfig;
   
   /** Computed PWA manifest */
-  readonly pwaManifest: Record<string, any>;
+  readonly pwaManifest: Record<string, unknown>;
 }
 
 /**