@qwickapps/react-framework 1.4.9 → 1.5.1

package/src/__tests__/utils/optional-logging.test.ts

@@ -15,12 +15,12 @@ describe('Optional logging dependency', () => {
 
   afterEach(() => {
     // Restore original require
-    (global as any).require = originalRequire;
+    (global as unknown as { require: typeof require }).require = originalRequire;
   });
 
   it('should use console fallback when @qwickapps/logging is not available', () => {
     // Mock require to throw an error (simulating missing package)
-    (global as any).require = jest.fn().mockImplementation((module: string) => {
+    (global as unknown as { require: jest.Mock }).require = jest.fn().mockImplementation((module: string) => {
       if (module === '@qwickapps/logging') {
         throw new Error('Cannot find module');
       }
@@ -63,7 +63,7 @@ describe('Optional logging dependency', () => {
     process.env.NODE_ENV = 'production';
 
     // Mock require to throw an error (use fallback)
-    (global as any).require = jest.fn().mockImplementation((module: string) => {
+    (global as unknown as { require: jest.Mock }).require = jest.fn().mockImplementation((module: string) => {
       if (module === '@qwickapps/logging') {
         throw new Error('Cannot find module');
       }

package/src/components/AccessibilityProvider.tsx

@@ -9,7 +9,7 @@ export interface AccessibilityState {
 	isKeyboardUser: boolean;
 	issues: AccessibilityIssue[];
 	lastAnnouncement: Announcement | null;
-	preferences: Record<string, any>;
+	preferences: Record<string, unknown>;
 }
 
 export interface AccessibilityIssue {
@@ -415,10 +415,12 @@ export const AccessibilityProvider: React.FC<AccessibilityProviderProps> = ({
 		if (typeof document === 'undefined') return;
 
 		const { highContrast, reducedMotion, largeText } = state;
-		
+
 		document.body.classList.toggle('high-contrast', highContrast);
 		document.body.classList.toggle('reduced-motion', reducedMotion);
 		document.body.classList.toggle('large-text', largeText);
+		// Using specific properties is more granular than using entire state object
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [state.highContrast, state.reducedMotion, state.largeText]);
 
 	return (

package/src/components/ErrorBoundary.tsx

@@ -68,7 +68,7 @@ export class ErrorBoundary extends Component<Props, State> {
 
 		// Send error to logging service if available
 		if (typeof window !== 'undefined') {
-			// @ts-ignore - Global error logging service
+			// @ts-expect-error - Global error logging service may not be defined
 			if (window.qwickapps?.logError) {
 				window.qwickapps.logError(error, errorInfo);
 			}

package/src/components/Html.tsx

@@ -26,16 +26,16 @@ import { Box } from '@mui/material';
 import React, { ReactElement } from 'react';
 import type { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../hooks';
-import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
 import HtmlModel from '../schemas/HtmlSchema';
+import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
 import { ModelView } from './base/ModelView';
 import SafeSpan from './SafeSpan';
 
 // Legacy types for backward compatibility (now unused internally but maintained for API)
 export interface TransformConfig {
-  rules?: any[];
+  rules?: unknown[];
   sanitize?: boolean;
-  sanitizeOptions?: any;
+  sanitizeOptions?: Record<string, unknown>;
   fallbackComponent?: (element: Element, key: string) => React.ReactNode;
 }
 
@@ -45,20 +45,17 @@ type HtmlViewProps = SchemaProps<HtmlModel> & {
   /** Whether to sanitize HTML (legacy - now handled internally) */
   sanitize?: boolean;
   /** Custom sanitization options (legacy - now handled internally) */
-  sanitizeOptions?: any;
+  sanitizeOptions?: Record<string, unknown>;
   /** Container element type (React.ElementType for internal use, string in model for serialization) */
   component?: React.ElementType;
 };
 
-export interface HtmlProps extends HtmlViewProps, WithDataBinding { }
+export interface HtmlProps extends HtmlViewProps, WithDataBinding {}
 
 // View component - handles the actual rendering
 function HtmlView({
   children = '',
-  transformConfig,
   stripHeaders = false,
-  sanitize = true,
-  sanitizeOptions,
   placeholder,
   component = 'div',
   ...restProps
@@ -66,7 +63,7 @@ function HtmlView({
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (HtmlView as any)[QWICKAPP_COMPONENT] = true;
+  (HtmlView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
   // Return placeholder if no HTML content
   if (!children || !children.trim()) {
@@ -186,7 +183,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
   static readonly version = '1.0.0';
 
   // Deserialization: JSON data → React element
-  static fromJson(jsonData: any): ReactElement {
+  static fromJson(jsonData: Record<string, unknown>): ReactElement {
     const { tagName, version, data } = jsonData;
     if (tagName !== Html.tagName) {
       throw new Error(`Cannot deserialize: Expected tagName 'Html' but got '${tagName}'`);
@@ -200,7 +197,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
   }
 
   // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
+  protected getComponentSpecificProps(): Record<string, unknown> {
     return {
       children: this.props.children,
       stripHeaders: this.props.stripHeaders,
@@ -210,7 +207,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
 
   // Html component renders traditional props view
   protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
+    const { ...restProps } = this.props;
     return <HtmlView {...restProps} />;
   }
 
@@ -220,7 +217,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
   }
 
   // Register HTML patterns that Html component can handle
-  static registerPatternHandlers(registry: any): void {
+  static registerPatternHandlers(registry: Record<string, unknown>): void {
     // Register div elements with specific classes for Html transformation
     if (!registry.hasPattern('div.html-content')) {
       registry.registerPattern('div.html-content', Html.transformHtmlDiv);
@@ -233,7 +230,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
   }
 
   // Transform div with html-content class to Html component
-  private static transformHtmlDiv(element: Element): any {
+  private static transformHtmlDiv(element: Element): Record<string, unknown> {
     const stripHeaders = element.getAttribute('data-strip-headers') === 'true';
     const placeholder = element.getAttribute('data-placeholder');
 
@@ -248,7 +245,7 @@ export class Html extends ModelView<HtmlProps, HtmlModel> {
   }
 
   // Transform elements with data-html attribute to Html component
-  private static transformDataHtml(element: Element): any {
+  private static transformDataHtml(element: Element): Record<string, unknown> {
     const htmlContent = element.getAttribute('data-html') || element.innerHTML;
     const stripHeaders = element.getAttribute('data-strip-headers') === 'true';
     const placeholder = element.getAttribute('data-placeholder');
@@ -269,7 +266,7 @@ function HtmlWithDataBinding(props: HtmlProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
   // Use data binding
-  const { dataSource: _source, loading, error, cached, ...htmlProps } = useDataBinding<HtmlModel>(
+  const { loading, error, ...htmlProps } = useDataBinding<HtmlModel>(
     dataSource!,
     restProps as Partial<HtmlModel>,
     HtmlModel.getSchema(),

package/src/components/Logo.tsx

@@ -35,7 +35,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { useRef, useEffect, useState, useCallback } from 'react';
+import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 import type { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../hooks';
 import LogoModel from '../schemas/LogoSchema';
@@ -73,13 +73,16 @@ function LogoView({
   className,
   ...restProps
 }: LogoViewProps) {
-  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
-  
-  // Convert separate offset values to BadgeOffset object
-  const badgeOffset: BadgeOffset | undefined = (badgeOffsetX !== undefined || badgeOffsetY !== undefined) 
-    ? { x: badgeOffsetX, y: badgeOffsetY }
-    : undefined;
-  
+  const { styleProps, htmlProps } = useBaseProps(restProps);
+
+  // Convert separate offset values to BadgeOffset object - memoize to prevent unnecessary re-renders
+  const badgeOffset: BadgeOffset | undefined = useMemo(
+    () => (badgeOffsetX !== undefined || badgeOffsetY !== undefined)
+      ? { x: badgeOffsetX, y: badgeOffsetY }
+      : undefined,
+    [badgeOffsetX, badgeOffsetY]
+  );
+
   const textRef = useRef<SVGTextElement>(null);
   const [calculatedBadgePosition, setCalculatedBadgePosition] = useState({ x: 155, y: 20 });
   const [svgWidth, setSvgWidth] = useState(180);
@@ -156,7 +159,7 @@ function LogoView({
   const { fontSize, height } = getSizeConfig(size, isNewLine);
 
   // Calculate badge position based on semantic positioning system
-  const calculateBadgePosition = useCallback((textBBox: DOMRect, svgWidth: number, svgHeight: number) => {
+  const calculateBadgePosition = useCallback((textBBox: DOMRect) => {
     // Scale factor based on font size (medium/28px is the baseline)
     const scale = fontSize / 28; // 28 is the medium/default font size
     const scaledOffset = 8 * scale;
@@ -223,14 +226,14 @@ function LogoView({
     if (textRef.current) {
       const textBBox = textRef.current.getBBox();
       // Calculate badge position using semantic positioning
-      const badgePos = calculateBadgePosition(textBBox, svgWidth, height);
+      const badgePos = calculateBadgePosition(textBBox);
       // Ensure SVG is wide enough to accommodate text and badge
       const requiredWidth = Math.max(180, textBBox.x + textBBox.width + 20);
-      
+
       setCalculatedBadgePosition(badgePos);
       setSvgWidth(requiredWidth);
     }
-  }, [name, badge, badgeOffset, calculateBadgePosition, fontSize, height, parseNameParts]);
+  }, [name, badge, badgeOffset, calculateBadgePosition, fontSize, height, parseNameParts, svgWidth]);
   
   // Determine CSS class for variant
   let variantClass = '';
@@ -268,23 +271,24 @@ function LogoView({
             <animate attributeName="r" values={`${badgeRadius};${badgeRadius + 1};${badgeRadius}`} dur="1.5s" repeatCount="indefinite" />
           </circle>
         );
-      case 'star':
+      case 'star': {
         const starScale = scale;
         return (
-          <polygon 
+          <polygon
             points={`${x},${y-5*starScale} ${x+2*starScale},${y} ${x+7*starScale},${y} ${x+3*starScale},${y+3*starScale} ${x+5*starScale},${y+8*starScale} ${x},${y+5*starScale} ${x-5*starScale},${y+8*starScale} ${x-3*starScale},${y+3*starScale} ${x-7*starScale},${y} ${x-2*starScale},${y}`}
             {...baseProps}
           >
             <animate attributeName="opacity" values="0.8;1;0.8" dur="1.5s" repeatCount="indefinite" />
           </polygon>
         );
+      }
       case 'square':
         return (
           <rect x={x-badgeRadius} y={y-badgeRadius} width={badgeSize} height={badgeSize} {...baseProps}>
             <animate attributeName="opacity" values="0.8;1;0.8" dur="1.5s" repeatCount="indefinite" />
           </rect>
         );
-      case 'heart':
+      case 'heart': {
         const heartScale = scale;
         return (
           <path
@@ -294,6 +298,7 @@ function LogoView({
             <animate attributeName="fill-opacity" values="0.7;1;0.7" dur="1.5s" repeatCount="indefinite" />
           </path>
         );
+      }
       default:
         return (
           <circle cx={x} cy={y} r={badgeRadius} {...baseProps}>
@@ -365,7 +370,7 @@ function LogoView({
     }
 
     // Create container with image positioned based on imagePosition
-    let containerStyle: React.CSSProperties = {
+    const containerStyle: React.CSSProperties = {
       display: 'flex',
       alignItems: 'center',
       gap: '8px',
@@ -421,20 +426,28 @@ function LogoView({
 // Main Logo component with data binding support
 function Logo(props: LogoProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
-  
+
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<LogoModel>(
+    dataSource || '',
+    {
+      initialData: restProps,
+      schema: LogoModel.getSchema(),
+      cache: true,
+      cacheTTL: 300000,
+      strict: false,
+      ...bindingOptions
+    }
+  );
+
   // If no dataSource, use traditional props
   if (!dataSource) {
     return <LogoView {...restProps} />;
   }
-  
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...logoProps } = useDataBinding<LogoModel>(
-    dataSource,
-    restProps as Partial<LogoModel>,
-    LogoModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
-  
+
+  // Use data binding result
+  const { loading, error, ...logoProps } = bindingResult;
+
   // Show loading state
   if (loading) {
     return (
@@ -443,7 +456,7 @@ function Logo(props: LogoProps) {
       </div>
     );
   }
-  
+
   // Show error state
   if (error) {
     return (
@@ -452,12 +465,12 @@ function Logo(props: LogoProps) {
       </div>
     );
   }
-  
+
   return <LogoView {...logoProps} />;
 }
 
 // Mark as QwickApp component
-(Logo as any)[QWICKAPP_COMPONENT] = true;
+Object.defineProperty(Logo, QWICKAPP_COMPONENT, { value: true, enumerable: false, configurable: true });
 
 // Export types for external use
 export type { LogoVariant, LogoSize, LogoBadgeShape, PositionType, BadgeOffset };

package/src/components/Markdown.tsx

@@ -22,7 +22,7 @@
 
 import { Box } from '@mui/material';
 import { marked } from 'marked';
-import React, { ReactElement } from 'react';
+import React from 'react';
 import type { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../hooks';
 import MarkdownModel from '../schemas/MarkdownSchema';
@@ -35,7 +35,7 @@ type MarkdownViewProps = SchemaProps<MarkdownModel> & {
   /** Custom transformation configuration for HTML conversion */
   htmlTransformConfig?: TransformConfig;
   /** Custom sanitization options */
-  sanitizeOptions?: any;
+  sanitizeOptions?: unknown;
   /** Container element type */
   component?: React.ElementType;
   /** Marked options for Markdown parsing */
@@ -78,7 +78,7 @@ function MarkdownView({
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (MarkdownView as any)[QWICKAPP_COMPONENT] = true;
+  (MarkdownView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
   // Return placeholder if no Markdown content
   if (!children || !children.trim()) {
@@ -192,7 +192,7 @@ export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
   static readonly version = '1.0.0';
   
   // Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
+  protected getComponentSpecificProps(): unknown {
     return {
       children: this.props.children,
       sanitize: this.props.sanitize,
@@ -202,7 +202,7 @@ export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
 
   // Markdown component renders traditional props view
   protected renderView(): React.ReactElement {
-    const { dataSource, bindingOptions, ...restProps } = this.props;
+    const { ...restProps } = this.props;
     return <MarkdownView {...restProps} />;
   }
 
@@ -212,7 +212,7 @@ export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
   }
 
   // Register HTML patterns that Markdown component can handle
-  static registerPatternHandlers(registry: any): void {
+  static registerPatternHandlers(registry: unknown): void {
     // Register div elements with specific classes for Markdown transformation
     if (!registry.hasPattern('div.markdown-content')) {
       registry.registerPattern('div.markdown-content', Markdown.transformMarkdownDiv);
@@ -225,7 +225,7 @@ export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
   }
 
   // Transform div with markdown-content class to Markdown component
-  private static transformMarkdownDiv(element: Element): any {
+  private static transformMarkdownDiv(element: Element): unknown {
     const sanitize = element.getAttribute('data-sanitize') !== 'false';
     const placeholder = element.getAttribute('data-placeholder');
     
@@ -240,7 +240,7 @@ export class Markdown extends ModelView<MarkdownProps, MarkdownModel> {
   }
 
   // Transform elements with data-markdown attribute to Markdown component
-  private static transformDataMarkdown(element: Element): any {
+  private static transformDataMarkdown(element: Element): unknown {
     const markdownContent = element.getAttribute('data-markdown') || element.textContent;
     const sanitize = element.getAttribute('data-sanitize') !== 'false';
     const placeholder = element.getAttribute('data-placeholder');
@@ -261,7 +261,7 @@ function MarkdownWithDataBinding(props: MarkdownProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
   // Use data binding
-  const { dataSource: _source, loading, error, cached, ...markdownProps } = useDataBinding<MarkdownModel>(
+  const { loading, error, ...markdownProps } = useDataBinding<MarkdownModel>(
     dataSource!,
     restProps as Partial<MarkdownModel>,
     MarkdownModel.getSchema(),

package/src/components/ProductLogo.tsx

@@ -0,0 +1,118 @@
+/**
+ * ProductLogo - Simplified QwickApps product logo component
+ *
+ * A convenience wrapper around the Logo component specifically designed for
+ * QwickApps product branding. Automatically handles icon positioning and
+ * styling to create consistent product logos across the QwickApps suite.
+ *
+ * Features:
+ * - Automatically positions the icon close to the product name
+ * - Consistent styling across all QwickApps products
+ * - Simple API: just provide icon and name
+ * - Supports all Logo component features (size, variant, badge, etc.)
+ *
+ * Example Usage:
+ * ```tsx
+ * import { ProductLogo, QwickIcon } from '@qwickapps/react-framework';
+ *
+ * // Simple usage
+ * <ProductLogo icon={<QwickIcon />} name="wick Press" />
+ *
+ * // With custom size
+ * <ProductLogo
+ *   icon={<QwickIcon size={32} />}
+ *   name="wick Forge"
+ *   size="small"
+ * />
+ *
+ * // With click handler
+ * <ProductLogo
+ *   icon={<QwickIcon />}
+ *   name="wick Apps"
+ *   onClick={() => window.location.href = '/'}
+ * />
+ * ```
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React, { cloneElement, isValidElement } from 'react';
+import Logo from './Logo';
+import type { LogoProps } from './Logo';
+import QwickIcon from './QwickIcon';
+
+export interface ProductLogoProps extends Omit<LogoProps, 'image' | 'imagePosition'> {
+  /** The icon element (defaults to QwickIcon) */
+  icon?: React.ReactElement;
+  /** The product name (e.g., "wick Press", "wick Forge") */
+  name: string;
+  /** Optional click handler */
+  onClick?: (event: React.MouseEvent<SVGSVGElement | HTMLDivElement>) => void;
+  /** Additional inline styles */
+  style?: React.CSSProperties;
+  /** Additional CSS class names */
+  className?: string;
+}
+
+/**
+ * ProductLogo Component
+ *
+ * Creates a branded product logo by combining a QwickIcon with a product name.
+ * The icon is automatically positioned close to the text with proper styling.
+ */
+const ProductLogo: React.FC<ProductLogoProps> = ({
+  icon,
+  name,
+  size = 'small',
+  onClick,
+  style,
+  className,
+  ...restProps
+}) => {
+  // Calculate icon size based on logo size
+  const getIconSize = (logoSize: string = 'small'): number => {
+    const sizeMap: Record<string, number> = {
+      'tiny': 20,
+      'small': 32,
+      'medium': 40,
+      'large': 52,
+      'extra-large': 68
+    };
+    return sizeMap[logoSize] || 32;
+  };
+
+  // Use QwickIcon as default if no icon provided
+  const iconElement = icon || <QwickIcon />;
+
+  // Clone the icon element and apply positioning styles
+  const styledIcon = isValidElement(iconElement)
+    ? cloneElement(iconElement, {
+        size: (iconElement.props as Record<string, unknown>).size || getIconSize(size as string),
+        style: {
+          position: 'relative',
+          left: '25px',
+          zIndex: 999,
+          ...((iconElement.props as Record<string, unknown>).style as React.CSSProperties | undefined)
+        }
+      } as Record<string, unknown>)
+    : iconElement;
+
+  return (
+    <Logo
+      name={name}
+      size={size}
+      image={styledIcon}
+      imagePosition="start"
+      style={{
+        cursor: onClick ? 'pointer' : 'default',
+        zIndex: 1000,
+        ...style
+      }}
+      className={className}
+      onClick={onClick}
+      {...restProps}
+    />
+  );
+};
+
+export default ProductLogo;