@qwickapps/react-framework 1.4.9 → 1.5.1

package/src/components/QwickApp.tsx

@@ -96,7 +96,7 @@ export const QwickApp: React.FC<QwickAppComponentProps> = ({
   // Resolve configuration: explicit props override config defaults
   const resolvedConfig = {
     appName: appNameProp ?? config?.app.name,
-    appId: appIdProp ?? config?.app.id ?? true,
+    appId: appIdProp ?? config?.app.id,
     logo: logoProp ?? config?.app.logo,
     enableScaffolding: enableScaffoldingProp ?? config?.ui.enableScaffolding ?? false,
     showThemeSwitcher: showThemeSwitcherProp ?? config?.ui.showThemeSwitcher ?? false,

package/src/components/QwickAppsLogo.tsx

@@ -13,7 +13,7 @@ import { WithBaseProps, useBaseProps } from '../hooks/useBaseProps';
 
 export type QwickAppsLogoSize = 'small' | 'medium' | 'large';
 
-export interface QwickAppsLogoProps extends WithBaseProps, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height' | 'className' | 'style' | 'onClick' | 'onBlur' | 'onFocus' | 'onMouseEnter' | 'onMouseLeave' | 'role'> {
+export interface QwickAppsLogoProps extends WithBaseProps {
   /** Size variant of the logo */
   size?: QwickAppsLogoSize;
   /** Click handler for the logo */

package/src/components/ResponsiveMenu.tsx

@@ -57,7 +57,7 @@ const ResponsiveMenu: React.FC<ResponsiveMenuProps> = (props) => {
   } = restProps;
   
   // Mark as QwickApp component
-  (ResponsiveMenu as any)[QWICKAPP_COMPONENT] = true;
+  (ResponsiveMenu as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
   const [screenSize, setScreenSize] = useState<ScreenSize>('desktop');
   const [isNavRailExpanded, setIsNavRailExpanded] = useState(false);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);

package/src/components/SafeSpan.tsx

@@ -10,7 +10,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import sanitizeHtml from 'sanitize-html';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../hooks';
@@ -23,10 +23,10 @@ export interface SafeSpanProps extends SafeSpanViewProps, WithDataBinding {}
 // View component - handles the actual rendering
 function SafeSpanView(props: SafeSpanViewProps) {
   const { html, placeholder, ...restProps } = props;
-  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
+  const { styleProps, htmlProps } = useBaseProps(restProps);
   
   // Mark as QwickApp component
-  (SafeSpanView as any)[QWICKAPP_COMPONENT] = true;
+  (SafeSpanView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
   
   // Enhanced HTML sanitization with strict security configuration
   const sanitizeOptions = {
@@ -101,7 +101,7 @@ export class SafeSpan extends ModelView<SafeSpanProps, SafeSpanModel> {
   static readonly version = '1.0.0';
   
   // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
+  protected getComponentSpecificProps(): unknown {
     return {
       html: this.props.html,
       placeholder: this.props.placeholder
@@ -110,7 +110,7 @@ export class SafeSpan extends ModelView<SafeSpanProps, SafeSpanModel> {
 
   // SafeSpan component renders traditional props view
   protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
+    const { ...restProps } = this.props;
     return <SafeSpanView {...restProps} />;
   }
 
@@ -120,7 +120,7 @@ export class SafeSpan extends ModelView<SafeSpanProps, SafeSpanModel> {
   }
 
   // Register HTML patterns that SafeSpan component can handle
-  static registerPatternHandlers(registry: any): void {
+  static registerPatternHandlers(registry: unknown): void {
     // Register span elements with specific classes or attributes
     if (!registry.hasPattern('span.safe-content')) {
       registry.registerPattern('span.safe-content', SafeSpan.transformSafeSpan);
@@ -133,7 +133,7 @@ export class SafeSpan extends ModelView<SafeSpanProps, SafeSpanModel> {
   }
 
   // Transform span elements to SafeSpan component
-  private static transformSafeSpan(element: Element): any {
+  private static transformSafeSpan(element: Element): unknown {
     const placeholder = element.getAttribute('data-placeholder');
     
     return {
@@ -151,7 +151,7 @@ function SafeSpanWithDataBinding(props: SafeSpanProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
   // Use data binding
-  const { dataSource: _source, loading, error, cached, ...safeSpanProps } = useDataBinding<SafeSpanModel>(
+  const { loading, error, ...safeSpanProps } = useDataBinding<SafeSpanModel>(
     dataSource!,
     restProps as Partial<SafeSpanModel>,
     SafeSpanModel.getSchema(),

package/src/components/Scaffold.css

@@ -23,7 +23,7 @@
   --menu-border: var(--theme-outline-variant);
   --menu-shadow: rgba(0, 0, 0, 0.1);
   
-  --scaffold-background: var(--theme-background);
+  --scaffold-background: var(--theme-surface);
   --scaffold-surface: var(--theme-surface);
   --scaffold-on-surface: var(--theme-on-surface);
   --scaffold-primary: var(--theme-primary);
@@ -454,6 +454,16 @@
   transition: padding 0.3s ease;
   padding-top: var(--appbar-height, 64px);
   padding-bottom: var(--bottom-nav-height, 80px);
+  box-sizing: border-box;
+}
+
+/* Content inner wrapper for proper padding */
+.app-scaffold-content > * {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 24px;
+  padding-right: 24px;
 }
 
 /* =================== ANIMATIONS =================== */

package/src/components/Scaffold.tsx

@@ -90,11 +90,12 @@ const Scaffold: React.FC<ScaffoldProps> = ({
   const [screenSize, setScreenSize] = useState<ScreenSize>('desktop');
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [isRailExpanded, setIsRailExpanded] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
 
   // React Router hooks (if available)
   const location = useSafeLocation();
   const navigate = useSafeNavigate();
-  const currentPath = location?.pathname;
+  const currentPath = isMounted ? location?.pathname : undefined;
   
   // Debug logging for navigation
   React.useEffect(() => {
@@ -103,6 +104,11 @@ const Scaffold: React.FC<ScaffoldProps> = ({
     }
   }, [currentPath]);
 
+  // Set mounted state after hydration to prevent hydration mismatch
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   const { appName: contextAppName, logo: contextLogo } = useQwickApp();
   const appName = propAppName || contextAppName;
 
@@ -136,23 +142,26 @@ const Scaffold: React.FC<ScaffoldProps> = ({
   // Material UI Guidelines: Split items based on screen size
   const getNavigationSplit = () => {
     switch (screenSize) {
-      case 'mobile':
+      case 'mobile': {
         // Bottom Nav: 3-5 items, rest in drawer
         const bottomNavItems = sortedItems.slice(0, 5);
         const drawerItems = sortedItems.slice(5);
         return { primaryItems: bottomNavItems, drawerItems };
+      }
 
-      case 'tablet':
+      case 'tablet': {
         // Nav Rail: 3-7 items, rest in drawer
         const railItems = sortedItems.slice(0, 7);
         const railDrawerItems = sortedItems.slice(7);
         return { primaryItems: railItems, drawerItems: railDrawerItems };
+      }
 
-      case 'desktop':
+      case 'desktop': {
         // App Bar: 5-7 items, rest in drawer
         const appBarItems = sortedItems.slice(0, 7);
         const appBarDrawerItems = sortedItems.slice(7);
         return { primaryItems: appBarItems, drawerItems: appBarDrawerItems };
+      }
 
       default:
         return { primaryItems: sortedItems, drawerItems: [] };
@@ -295,7 +304,7 @@ const Scaffold: React.FC<ScaffoldProps> = ({
     // External links
     if (item.href && !item.disabled) {
       return (
-        <a key={item.id} href={item.href} {...commonProps} target="_blank" rel="noopener noreferrer">
+        <a href={item.href} {...commonProps} target="_blank" rel="noopener noreferrer">
           {content}
         </a>
       );
@@ -304,7 +313,6 @@ const Scaffold: React.FC<ScaffoldProps> = ({
     // Internal navigation or custom click handlers
     return (
       <button
-        key={item.id}
         type="button"
         {...commonProps}
         disabled={Boolean(item.disabled || (isActiveItem && item.route === currentPath))}
@@ -316,7 +324,7 @@ const Scaffold: React.FC<ScaffoldProps> = ({
 
   // Calculate layout spacing
   const getLayoutSpacing = () => {
-    let paddingTop = showAppBar ? appBarHeight : 0;
+    const paddingTop = showAppBar ? appBarHeight : 0;
     let paddingBottom = 0;
     let paddingLeft = 0;
 
@@ -355,31 +363,36 @@ const Scaffold: React.FC<ScaffoldProps> = ({
               {/* Menu button for drawer (when needed) */}
               {(drawerItems.length > 0 || screenSize === 'tablet') && (
                 <button
+                  key="menu-button"
                   type="button"
                   className="menu-button"
                   onClick={screenSize === 'tablet' ? toggleRail : toggleDrawer}
                   aria-label={screenSize === 'tablet' ? 'Toggle navigation rail' : 'Open drawer menu'}
                 >
                   <span className="hamburger-icon">
-                    <span></span>
-                    <span></span>
-                    <span></span>
+                    <span key="hamburger-line-1"></span>
+                    <span key="hamburger-line-2"></span>
+                    <span key="hamburger-line-3"></span>
                   </span>
                 </button>
               )}
 
               {/* Logo/Title */}
-              {(!enhancedAppBar?.logoPosition || enhancedAppBar.logoPosition === 'left') && <AppLogo />}
+              {(!enhancedAppBar?.logoPosition || enhancedAppBar.logoPosition === 'left') && <AppLogo key="app-logo-left" />}
             </div>
 
             {/* Center section */}
             <div className="appbar-center">
-              {enhancedAppBar?.logoPosition === 'center' && <AppLogo />}
+              {enhancedAppBar?.logoPosition === 'center' && <AppLogo key="app-logo-center" />}
 
               {/* Desktop navigation items */}
               {screenSize === 'desktop' && (
-                <nav className="appbar-navigation">
-                  {primaryItems.map(item => renderMenuItem(item, 'appbar'))}
+                <nav key="desktop-navigation" className="appbar-navigation">
+                  {primaryItems.map(item => (
+                    <React.Fragment key={item.id}>
+                      {renderMenuItem(item, 'appbar')}
+                    </React.Fragment>
+                  ))}
                 </nav>
               )}
             </div>
@@ -387,14 +400,14 @@ const Scaffold: React.FC<ScaffoldProps> = ({
             {/* Right section */}
             <div className="appbar-right">
               {enhancedAppBar?.actions && (
-                <div className="appbar-actions">
+                <div key="appbar-actions" className="appbar-actions">
                   {enhancedAppBar.actions}
                 </div>
               )}
               {/* Theme and Palette Switchers */}
-              <div className="appbar-theme-controls">
-                {showThemeSwitcher && <ThemeSwitcher />}
-                {showPaletteSwitcher && <PaletteSwitcher />}
+              <div key="appbar-theme-controls" className="appbar-theme-controls">
+                {showThemeSwitcher && <ThemeSwitcher key="theme-switcher" />}
+                {showPaletteSwitcher && <PaletteSwitcher key="palette-switcher" />}
               </div>
             </div>
           </div>
@@ -405,7 +418,11 @@ const Scaffold: React.FC<ScaffoldProps> = ({
       {screenSize === 'tablet' && (
         <nav className={`navigation-rail ${isRailExpanded ? 'expanded' : 'collapsed'}`}>
           <div className="rail-items">
-            {primaryItems.map(item => renderMenuItem(item, 'rail'))}
+            {primaryItems.map(item => (
+              <React.Fragment key={item.id}>
+                {renderMenuItem(item, 'rail')}
+              </React.Fragment>
+            ))}
           </div>
         </nav>
       )}
@@ -414,7 +431,11 @@ const Scaffold: React.FC<ScaffoldProps> = ({
       {screenSize === 'mobile' && primaryItems.length > 0 && (
         <nav className="bottom-navigation">
           <div className="bottom-nav-items">
-            {primaryItems.map(item => renderMenuItem(item, 'bottom'))}
+            {primaryItems.map(item => (
+              <React.Fragment key={item.id}>
+                {renderMenuItem(item, 'bottom')}
+              </React.Fragment>
+            ))}
           </div>
         </nav>
       )}
@@ -424,8 +445,9 @@ const Scaffold: React.FC<ScaffoldProps> = ({
         <div className="drawer-overlay" onClick={toggleDrawer}>
           <nav className="navigation-drawer" onClick={(e) => e.stopPropagation()}>
             <div className="drawer-header">
-              <h3>Menu</h3>
+              <h3 key="drawer-title">Menu</h3>
               <button
+                key="drawer-close-button"
                 type="button"
                 className="drawer-close"
                 onClick={toggleDrawer}
@@ -437,15 +459,23 @@ const Scaffold: React.FC<ScaffoldProps> = ({
             <div className="drawer-items">
               {/* Show all primary items in drawer for consistency */}
               <div className="drawer-section">
-                <h4>Navigation</h4>
-                {primaryItems.map(item => renderMenuItem(item, 'drawer'))}
+                <h4 key="navigation-header">Navigation</h4>
+                {primaryItems.map(item => (
+                  <React.Fragment key={item.id}>
+                    {renderMenuItem(item, 'drawer')}
+                  </React.Fragment>
+                ))}
               </div>
 
               {/* Additional items */}
               {drawerItems.length > 0 && (
                 <div className="drawer-section">
-                  <h4>More</h4>
-                  {drawerItems.map(item => renderMenuItem(item, 'drawer'))}
+                  <h4 key="more-header">More</h4>
+                  {drawerItems.map(item => (
+                    <React.Fragment key={item.id}>
+                      {renderMenuItem(item, 'drawer')}
+                    </React.Fragment>
+                  ))}
                 </div>
               )}
             </div>

package/src/components/base/Container.tsx

@@ -32,12 +32,12 @@ export type ContainerProps = ViewProps & SchemaProps<typeof ContainerSchema>;
  * This component receives fully processed props from createSerializableView
  * and renders the container using Material-UI Box with all styling applied.
  */
-function ContainerView({ children, gridProps, ...props }: ContainerProps & { gridProps?: any }) {
+function ContainerView({ children, gridProps, ...props }: ContainerProps & { gridProps?: unknown }) {
   // Render the component as a Box with all processed props
   return (
     <Box
       {...props}
-      {...(gridProps && { 'data-grid': JSON.stringify(gridProps) })}
+      {...(gridProps ? { 'data-grid': JSON.stringify(gridProps) } : {})}
       component="div"
     >
       {children}

package/src/components/base/ModelView.tsx

@@ -73,21 +73,21 @@ function convertSchemaToBaseProps(schema: Partial<ViewSchema>): WithBaseProps {
 /**
  * Convert string event handler to function
  */
-function convertEventHandler(handlerStr?: string): ((event: any) => void) | undefined {
+function convertEventHandler(handlerStr?: string): ((event: unknown) => void) | undefined {
   if (!handlerStr || typeof handlerStr !== 'string') {
     return undefined;
   }
 
   try {
     // Create function from string - handle both function declarations and expressions
-    let func: Function;
+    let func: (...args: unknown[]) => unknown;
     if (handlerStr.trim().startsWith('function')) {
-      func = new Function(`return (${handlerStr})`)();
+      func = new Function(`return (${handlerStr})`)() as (...args: unknown[]) => unknown;
     } else {
-      func = new Function('event', handlerStr);
+      func = new Function('event', handlerStr) as (...args: unknown[]) => unknown;
     }
 
-    return (event: any) => func(event);
+    return (event: unknown) => func(event);
   } catch (error) {
     console.error('Error parsing event handler:', error);
     return undefined;
@@ -98,17 +98,17 @@ function convertEventHandler(handlerStr?: string): ((event: any) => void) | unde
  * Processed props that subclasses receive
  */
 export interface ProcessedProps {
-  gridProps: any;
-  styleProps: any;
-  htmlProps: any;
-  restProps: any;
+  gridProps: unknown;
+  styleProps: unknown;
+  htmlProps: unknown;
+  restProps: unknown;
 }
 
 /**
  * Abstract base class implementing ViewSchema
  * All concrete components should extend this class
  */
-export abstract class ModelView<TProps = any, TModel = any>
+export abstract class ModelView<TProps = Record<string, unknown>>
   extends React.Component<TProps & SchemaProps<ViewSchema> & WithDataBinding>
   implements Serializable {
 
@@ -119,8 +119,9 @@ export abstract class ModelView<TProps = any, TModel = any>
   /**
    * Common fromJson implementation
    */
-  static fromJson(jsonData: any): ReactElement {
-    const { tagName, version, data } = jsonData;
+  static fromJson(jsonData: unknown): ReactElement {
+    const typedData = jsonData as { tagName?: string; version?: string; data?: unknown };
+    const { tagName, version, data } = typedData;
     if (tagName !== this.tagName) {
       throw new Error(`Cannot deserialize: Expected tagName '${this.tagName}' but got '${tagName}'`);
     }
@@ -128,15 +129,15 @@ export abstract class ModelView<TProps = any, TModel = any>
       console.warn(`Version mismatch: Expected ${this.version} but got ${version}`);
     }
 
-    return React.createElement(this as any, data || {});
+    return React.createElement(this as React.ComponentType<unknown>, data || {});
   }
 
   /**
    * Common toJson implementation with hooks for customization
    */
-  toJson(): any {
-    const baseProps = this.getBaseSerializableProps();
-    const componentProps = this.getComponentSpecificProps();
+  toJson(): unknown {
+    const baseProps = this.getBaseSerializableProps() as Record<string, unknown>;
+    const componentProps = this.getComponentSpecificProps() as Record<string, unknown>;
     return {
       tagName: (this.constructor as typeof ModelView).tagName,
       version: (this.constructor as typeof ModelView).version,
@@ -152,7 +153,7 @@ export abstract class ModelView<TProps = any, TModel = any>
    * This converts ViewSchema props and processes them through useBaseProps
    */
   protected getProcessedProps(): ProcessedProps {
-    const { dataSource, bindingOptions, ...schemaProps } = this.props;
+    const { dataSource: _dataSource, bindingOptions: _bindingOptions, ...schemaProps } = this.props;
 
     // Convert ViewSchema props to BaseComponentProps format
     const convertedProps = convertSchemaToBaseProps(schemaProps);
@@ -221,8 +222,8 @@ export abstract class ModelView<TProps = any, TModel = any>
   /**
    * Common base props that all components serialize
    */
-  protected getBaseSerializableProps(): any {
-    const props = this.props as any;
+  protected getBaseSerializableProps(): unknown {
+    const props = this.props as TProps & SchemaProps<ViewSchema> & WithDataBinding;
     return {
       children: props.children ? this.serializeChildren(props.children) : undefined,
       dataSource: props.dataSource,
@@ -235,12 +236,12 @@ export abstract class ModelView<TProps = any, TModel = any>
   /**
    * Hook for subclasses to add component-specific serialization
    */
-  protected abstract getComponentSpecificProps(): any;
+  protected abstract getComponentSpecificProps(): unknown;
 
   /**
    * Common children serialization logic
    */
-  protected serializeChildren(children: ReactNode): any {
+  protected serializeChildren(children: ReactNode): unknown {
     if (typeof children === 'string') {
       return children;
     }
@@ -255,7 +256,7 @@ export abstract class ModelView<TProps = any, TModel = any>
   /**
    * Helper to determine if children contain other serializable components
    */
-  protected hasNestedComponents(children: ReactNode): boolean {
+  protected hasNestedComponents(_children: ReactNode): boolean {
     return false;
   }
 
@@ -263,7 +264,7 @@ export abstract class ModelView<TProps = any, TModel = any>
    * Common render pattern
    */
   render() {
-    const props = this.props as any;
+    const props = this.props as TProps & SchemaProps<ViewSchema> & WithDataBinding;
 
     if (props.dataSource) {
       return this.renderWithDataBinding();
@@ -285,7 +286,7 @@ export abstract class ModelView<TProps = any, TModel = any>
   /**
    * Register HTML pattern handlers for this component
    */
-  static registerPatternHandlers(_registry: any): void {
+  static registerPatternHandlers(_registry: unknown): void {
     // Default: no patterns to register
   }
 }
@@ -298,18 +299,18 @@ export function createModelViewClass<TProps, TModel>(
   config: {
     tagName: string;
     version: string;
-    getComponentSpecificProps: (props: TProps, processedProps: ProcessedProps) => any;
+    getComponentSpecificProps: (props: TProps, processedProps: ProcessedProps) => Record<string, unknown>;
     hasNestedComponents?: (children: ReactNode) => boolean;
     renderView: (props: TProps, processedProps: ProcessedProps) => React.ReactElement;
     renderWithDataBinding: (props: TProps & WithDataBinding, processedProps: ProcessedProps) => React.ReactElement;
   }
-): any {
+): unknown {
 
   class DynamicModelView extends ModelView<TProps, TModel> {
     static readonly tagName = config.tagName;
     static readonly version = config.version;
 
-    protected getComponentSpecificProps(): any {
+    protected getComponentSpecificProps(): unknown {
       const processedProps = this.getProcessedProps();
       return config.getComponentSpecificProps(this.props as TProps, processedProps);
     }

package/src/components/base/index.ts

@@ -8,5 +8,5 @@
  */
 
 export { ModelView, createModelViewClass } from './ModelView';
-export { default as Container, } from './Container';
+export { default as Container} from './Container';
 export type { ContainerProps } from './Container';