@qwickapps/react-framework 1.3.5 → 1.4.0

package/src/components/Html.tsx

@@ -23,37 +23,37 @@
  */
 
 import { Box } from '@mui/material';
-import React from 'react';
-import { QWICKAPP_COMPONENT, useBaseProps, WithBaseProps } from '../hooks';
+import React, { ReactElement } from 'react';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../hooks';
+import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
+import HtmlModel from '../schemas/HtmlSchema';
+import { ModelView } from './base/ModelView';
 import SafeSpan from './SafeSpan';
-import { 
-  TransformConfig, 
-  defaultArticleRules, 
-  transformHtmlToReact,
-  stripHeaderFromContent
-} from '../utils/htmlTransform';
-
-export interface HtmlProps extends WithBaseProps {
-  /** HTML content as string */
-  children: string;
-  /** Custom transformation configuration */
+
+// Legacy types for backward compatibility (now unused internally but maintained for API)
+export interface TransformConfig {
+  rules?: any[];
+  sanitize?: boolean;
+  sanitizeOptions?: any;
+  fallbackComponent?: (element: Element, key: string) => React.ReactNode;
+}
+
+type HtmlViewProps = ModelProps<HtmlModel> & {
+  /** Custom transformation configuration (legacy - now handled by ComponentTransformer) */
   transformConfig?: TransformConfig;
-  /** Whether to strip header elements (useful for articles) */
-  stripHeaders?: boolean;
-  /** Whether to sanitize HTML (default: true) */
+  /** Whether to sanitize HTML (legacy - now handled internally) */
   sanitize?: boolean;
-  /** Custom sanitization options */
+  /** Custom sanitization options (legacy - now handled internally) */
   sanitizeOptions?: any;
-  /** Fallback content when HTML is empty */
-  placeholder?: string;
-  /** Container element type */
+  /** Container element type (React.ElementType for internal use, string in model for serialization) */
   component?: React.ElementType;
-}
+};
 
-/**
- * Html component - transforms HTML strings to React components
- */
-export function Html({
+export interface HtmlProps extends HtmlViewProps, WithDataBinding {}
+
+// View component - handles the actual rendering
+function HtmlView({
   children = '',
   transformConfig,
   stripHeaders = false,
@@ -62,11 +62,11 @@ export function Html({
   placeholder,
   component = 'div',
   ...restProps
-}: HtmlProps) {
+}: HtmlViewProps) {
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
 
   // Mark as QwickApp component
-  (Html as any)[QWICKAPP_COMPONENT] = true;
+  (HtmlView as any)[QWICKAPP_COMPONENT] = true;
 
   // Return placeholder if no HTML content
   if (!children || !children.trim()) {
@@ -95,25 +95,16 @@ export function Html({
     let processedHtml = children;
     
     if (stripHeaders) {
-      processedHtml = stripHeaderFromContent(processedHtml);
+      // Simple header stripping - remove h1, h2, etc. tags
+      processedHtml = processedHtml.replace(/<h[1-6][^>]*>.*?<\/h[1-6]>/gi, '');
     }
 
-    // Use provided transform config or default article rules
-    const config: TransformConfig = transformConfig || {
-      rules: defaultArticleRules,
-      sanitize,
-      sanitizeOptions,
-      fallbackComponent: (element: Element, key: string) => (
-        <SafeSpan 
-          key={key} 
-          html={element.outerHTML} 
-          placeholder="Invalid HTML content"
-        />
-      )
-    };
-
-    // Transform HTML to React components
-    const components = transformHtmlToReact(processedHtml, config);
+    // Note: transformConfig, sanitize, and sanitizeOptions are legacy props
+    // maintained for backward compatibility. The new ComponentTransformer system
+    // handles transformation through registered patterns automatically.
+    
+    // Transform HTML to React components using ComponentTransformer
+    const components = ComponentTransformer.transformHTML(processedHtml);
 
     // Return transformed components
     return (
@@ -188,4 +179,116 @@ export function Html({
   }
 }
 
+// Main component with data binding support and serialization capability
+export class Html extends ModelView<HtmlProps, HtmlModel> {
+  // Component self-declaration for serialization
+  static readonly tagName = 'Html';
+  static readonly version = '1.0.0';
+  
+  // Deserialization: JSON data → React element
+  static fromJson(jsonData: any): ReactElement {
+    return <Html {...jsonData} />;
+  }
+  
+  // Component-specific serialization properties
+  protected getComponentSpecificProps(): any {
+    return {
+      children: this.props.children,
+      stripHeaders: this.props.stripHeaders,
+      placeholder: this.props.placeholder
+    };
+  }
+
+  // Html component renders traditional props view
+  protected renderView(): React.ReactElement {
+    const { dataSource, bindingOptions, ...restProps } = this.props;
+    return <HtmlView {...restProps} />;
+  }
+
+  // Html component renders data-bound view
+  protected renderWithDataBinding(): React.ReactElement {
+    return <HtmlWithDataBinding {...this.props} />;
+  }
+
+  // Register HTML patterns that Html component can handle
+  static registerPatternHandlers(registry: any): void {
+    // Register div elements with specific classes for Html transformation
+    if (!registry.hasPattern('div.html-content')) {
+      registry.registerPattern('div.html-content', Html.transformHtmlDiv);
+    }
+    
+    // Register elements with data-html attribute
+    if (!registry.hasPattern('[data-html]')) {
+      registry.registerPattern('[data-html]', Html.transformDataHtml);
+    }
+  }
+
+  // Transform div with html-content class to Html component
+  private static transformHtmlDiv(element: Element): any {
+    const stripHeaders = element.getAttribute('data-strip-headers') === 'true';
+    const placeholder = element.getAttribute('data-placeholder');
+    
+    return {
+      tagName: 'Html',
+      props: {
+        children: element.innerHTML,
+        stripHeaders,
+        placeholder: placeholder || undefined
+      }
+    };
+  }
+
+  // Transform elements with data-html attribute to Html component
+  private static transformDataHtml(element: Element): any {
+    const htmlContent = element.getAttribute('data-html') || element.innerHTML;
+    const stripHeaders = element.getAttribute('data-strip-headers') === 'true';
+    const placeholder = element.getAttribute('data-placeholder');
+    
+    return {
+      tagName: 'Html',
+      props: {
+        children: htmlContent,
+        stripHeaders,
+        placeholder: placeholder || undefined
+      }
+    };
+  }
+}
+
+// Helper component to handle data binding with hooks (since we can't use hooks in class components)
+function HtmlWithDataBinding(props: HtmlProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
+
+  // Use data binding
+  const { dataSource: _source, loading, error, cached, ...htmlProps } = useDataBinding<HtmlModel>(
+    dataSource!,
+    restProps as Partial<HtmlModel>,
+    HtmlModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
+  // Show loading state
+  if (loading) {
+    return (
+      <Box sx={{ p: 2, textAlign: 'center', opacity: 0.6 }}>
+        Loading HTML content...
+      </Box>
+    );
+  }
+
+  if (error) {
+    console.error('Error loading HTML content:', error);
+    if (process.env.NODE_ENV !== 'production') {
+      return (
+        <Box sx={{ p: 2, border: '1px solid red', borderRadius: 1, backgroundColor: 'rgba(255, 0, 0, 0.1)' }}>
+          <strong>Error Loading HTML:</strong> {error.message}
+        </Box>
+      );
+    }
+    return null;
+  }
+
+  return <HtmlView {...htmlProps} />;
+}
+
 export default Html;

package/src/components/Logo.tsx

@@ -1,5 +1,5 @@
 /**
- * Dynamic Logo Component - Generic theme-aware logo
+ * Dynamic Logo Component - Generic theme-aware logo with image support
  * 
  * Features:
  * - Automatic text width calculation with dynamic SVG sizing
@@ -10,6 +10,7 @@
  * - Accessibility support with proper ARIA labels
  * - Customizable styling via CSS classes for each text part
  * - Text formatting with escape sequences
+ * - Image support with flexible positioning
  * 
  * Text Formatting (TWO PARTS MAXIMUM):
  * - Use \n for line breaks (second part appears on new line)
@@ -35,78 +36,49 @@
  */
 
 import React, { useRef, useEffect, useState, useCallback } from 'react';
-import { WithBaseProps, useBaseProps, QWICKAPP_COMPONENT } from '../hooks/useBaseProps';
+import type { WithDataBinding, ModelProps } from '@qwickapps/schema';
+import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../hooks';
+import LogoModel from '../schemas/LogoSchema';
+import { LogoVariant, LogoSize, LogoBadgeShape, PositionType, BadgeOffset } from '../schemas/LogoSchema';
 import './Logo.css';
 
-export type LogoVariant = 'default' | 'high-contrast' | 'monochrome' | 'on-primary';
-export type LogoSize = 'tiny' | 'small' | 'medium' | 'large' | 'extra-large';
-export type LogoBadgeShape = 'circle' | 'star' | 'square' | 'heart';
-export type BadgePositionType = 
-  | 'none'
-  | 'top-left' 
-  | 'top-center' 
-  | 'top-right' 
-  | 'center-left' 
-  | 'center' 
-  | 'center-right' 
-  | 'bottom-left' 
-  | 'bottom-center' 
-  | 'bottom-right';
-
-export interface BadgeOffset {
-  /** Horizontal offset from the calculated position (positive = right, negative = left) */
-  x?: number;
-  /** Vertical offset from the calculated position (positive = down, negative = up) */
-  y?: number;
-}
-
-export interface LogoProps extends WithBaseProps, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height' | 'className' | 'style' | 'role' | 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onFocus' | 'onBlur'> {
-  /** Logo name/text to display. Supports up to TWO parts with \n for line breaks and \s for explicit spaces. */
-  name?: string;
+type LogoViewProps = ModelProps<LogoModel> & {
   /** Click handler for the logo */
-  onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
+  onClick?: (event: React.MouseEvent<SVGSVGElement | HTMLDivElement>) => void;
   /** Additional inline styles */
   style?: React.CSSProperties;
-  /** Visual variant of the logo */
-  variant?: LogoVariant;
-  /** Size variant of the logo (controls both text size and visual height) */
-  size?: LogoSize;
   /** Additional CSS class names */
   className?: string;
-  /** Badge position and visibility. 'none' hides the badge, others show it at the specified position. */
-  badge?: BadgePositionType;
-  /** Shape of the badge */
-  badgeShape?: LogoBadgeShape;
-  /** Offset from the calculated badge position. Applied after position calculation. Automatically scales with logo size. */
-  badgeOffset?: BadgeOffset;
-  /** Font family for the logo text */
-  fontFamily?: string;
-  /** Font weight for the logo text */
-  fontWeight?: string | number;
-  /** CSS class name for the first part of the logo text. Defaults to 'logo-first-part'. */
-  firstPartClass?: string;
-  /** CSS class name for the second part of the logo text. Defaults to 'logo-second-part'. */
-  secondPartClass?: string;
-}
+};
+
+interface LogoProps extends LogoViewProps, WithDataBinding {}
 
-const Logo: React.FC<LogoProps> = (props) => {
-  const { styleProps, htmlProps, restProps } = useBaseProps(props);
-  const {
-    name = 'Qwick Apps',
-    variant = 'default',
-    size = 'medium',
-    badge = 'top-right',
-    badgeShape = 'circle',
-    badgeOffset,
-    fontFamily = 'Segoe UI, sans-serif',
-    fontWeight = 'bold',
-    firstPartClass = 'logo-first-part',
-    secondPartClass = 'logo-second-part',
-    ...svgProps
-  } = restProps;
+// View component - handles the actual rendering
+function LogoView({
+  name = 'Qwick Apps',
+  variant = 'default',
+  size = 'medium',
+  badge = 'top-right',
+  badgeShape = 'circle',
+  badgeOffsetX,
+  badgeOffsetY,
+  fontFamily = 'Segoe UI, sans-serif',
+  fontWeight = 'bold',
+  firstPartClass = 'logo-first-part',
+  secondPartClass = 'logo-second-part',
+  image,
+  imagePosition = 'start',
+  onClick,
+  style,
+  className,
+  ...restProps
+}: LogoViewProps) {
+  const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
   
-  // Mark as QwickApp component
-  (Logo as any)[QWICKAPP_COMPONENT] = true;
+  // Convert separate offset values to BadgeOffset object
+  const badgeOffset: BadgeOffset | undefined = (badgeOffsetX !== undefined || badgeOffsetY !== undefined) 
+    ? { x: badgeOffsetX, y: badgeOffsetY }
+    : undefined;
   
   const textRef = useRef<SVGTextElement>(null);
   const [calculatedBadgePosition, setCalculatedBadgePosition] = useState({ x: 155, y: 20 });
@@ -209,7 +181,7 @@ const Logo: React.FC<LogoProps> = (props) => {
         x = textBBox.x + textBBox.width + scaledOffset;
         y = textBBox.y + scaledOffset;
         break;
-      case 'center-left':
+      case 'start':  // was 'center-left'
         x = textBBox.x - scaledOffset;
         y = textBBox.y + textBBox.height / 2;
         break;
@@ -217,7 +189,7 @@ const Logo: React.FC<LogoProps> = (props) => {
         x = textBBox.x + textBBox.width / 2;
         y = textBBox.y + textBBox.height / 2;
         break;
-      case 'center-right':
+      case 'end':    // was 'center-right'
         x = textBBox.x + textBBox.width + scaledOffset;
         y = textBBox.y + textBBox.height / 2;
         break;
@@ -330,41 +302,167 @@ const Logo: React.FC<LogoProps> = (props) => {
         );
     }
   };
+
+  // Render image if provided
+  const renderImage = (): React.ReactNode => {
+    if (!image || imagePosition === 'none') return null;
+    
+    // If image is a string, assume it's an image path
+    if (typeof image === 'string') {
+      const imageSize = fontSize; // Scale image with font size
+      return (
+        <img
+          src={image}
+          alt=""
+          style={{
+            width: imageSize,
+            height: imageSize,
+            objectFit: 'contain'
+          }}
+          className="logo-image"
+        />
+      );
+    }
+    
+    // If image is a React node, render it directly
+    return <div className="logo-image-container">{image}</div>;
+  };
+
+  // Determine layout based on image position
+  const renderWithImage = () => {
+    const logoSvg = (
+      <svg 
+        width={svgWidth} 
+        height={height} 
+        viewBox={`0 0 ${svgWidth} ${height}`} 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg"
+        className={`logo-svg dynamic-logo ${sizeClass} ${variantClass}`.trim()}
+        style={{ height: `${height}px` }}
+        role="img"
+        aria-label={ariaLabel}
+      >
+        <text ref={textRef} fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight}>
+          <tspan x="15" y={isNewLine ? height * 0.4 : height * 0.7} className={firstPartClass}>{firstPart}</tspan>
+          {secondPart && (
+            <tspan 
+              x={isNewLine ? "15" : undefined}
+              dy={isNewLine ? fontSize * 1.2 : undefined}
+              className={secondPartClass}
+            >
+              {isNewLine ? secondPart : (hasExplicitSpaces ? ` ${secondPart}` : secondPart)}
+            </tspan>
+          )}
+        </text>
+        {renderBadgeShape()}
+      </svg>
+    );
+
+    const imageElement = renderImage();
+    
+    if (!imageElement) {
+      return logoSvg;
+    }
+
+    // Create container with image positioned based on imagePosition
+    let containerStyle: React.CSSProperties = {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+    };
+
+    let containerClass = 'logo-container';
+
+    switch (imagePosition) {
+      case 'start':
+        containerStyle.flexDirection = 'row';
+        containerClass += ' logo-image-start';
+        break;
+      case 'end':
+        containerStyle.flexDirection = 'row-reverse';
+        containerClass += ' logo-image-end';
+        break;
+      case 'top-center':
+        containerStyle.flexDirection = 'column';
+        containerClass += ' logo-image-top';
+        break;
+      case 'bottom-center':
+        containerStyle.flexDirection = 'column-reverse';
+        containerClass += ' logo-image-bottom';
+        break;
+      default:
+        // For other positions, default to start
+        containerStyle.flexDirection = 'row';
+        containerClass += ' logo-image-start';
+        break;
+    }
+
+    return (
+      <div
+        {...htmlProps}
+        {...styleProps}
+        className={`${containerClass} ${className || ''}`.trim()}
+        style={{ 
+          ...containerStyle,
+          cursor: onClick ? 'pointer' : 'default',
+          ...style
+        }}
+        onClick={onClick}
+      >
+        {imageElement}
+        {logoSvg}
+      </div>
+    );
+  };
+
+  return renderWithImage();
+}
+
+// Main Logo component with data binding support
+function Logo(props: LogoProps) {
+  const { dataSource, bindingOptions, ...restProps } = props;
   
-  return (
-    <svg 
-      width={svgWidth} 
-      height={height} 
-      viewBox={`0 0 ${svgWidth} ${height}`} 
-      fill="none" 
-      xmlns="http://www.w3.org/2000/svg"
-      {...htmlProps}
-      {...styleProps}
-      className={`logo dynamic-logo ${sizeClass} ${variantClass} ${styleProps.className || ''}`.trim()}
-      style={{ 
-        height: `${height}px`, 
-        cursor: htmlProps.onClick ? 'pointer' : 'default',
-        ...styleProps.style 
-      }}
-      role="img"
-      aria-label={ariaLabel}
-      {...svgProps}
-    >
-      <text ref={textRef} fontFamily={fontFamily} fontSize={fontSize} fontWeight={fontWeight}>
-        <tspan x="15" y={isNewLine ? height * 0.4 : height * 0.7} className={firstPartClass}>{firstPart}</tspan>
-        {secondPart && (
-          <tspan 
-            x={isNewLine ? "15" : undefined}
-            dy={isNewLine ? fontSize * 1.2 : undefined}
-            className={secondPartClass}
-          >
-            {isNewLine ? secondPart : (hasExplicitSpaces ? ` ${secondPart}` : secondPart)}
-          </tspan>
-        )}
-      </text>
-      {renderBadgeShape()}
-    </svg>
+  // 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 }
   );
-};
+  
+  // Show loading state
+  if (loading) {
+    return (
+      <div style={{ opacity: 0.5, textAlign: 'center', padding: '16px' }}>
+        Loading logo...
+      </div>
+    );
+  }
+  
+  // Show error state
+  if (error) {
+    console.error('Error loading logo:', error);
+    return (
+      <div style={{ color: 'red', textAlign: 'center', padding: '16px' }}>
+        Error loading logo: {error.message}
+      </div>
+    );
+  }
+  
+  console.log('Resolved props for Logo:', logoProps);
+  return <LogoView {...logoProps} />;
+}
+
+// Mark as QwickApp component
+(Logo as any)[QWICKAPP_COMPONENT] = true;
+
+// Export types for external use
+export type { LogoVariant, LogoSize, LogoBadgeShape, PositionType, BadgeOffset };
+export type { LogoProps, LogoViewProps };
 
 export default Logo;