@qwickapps/react-framework 1.3.1 → 1.3.3

package/src/utils/htmlTransform.tsx

@@ -179,6 +179,26 @@ export const defaultMarkdownRules: TransformRule[] = [
   }
 ];
 
+/**
+ * Parse style string into React style object
+ */
+function parseStyleString(styleStr: string): React.CSSProperties {
+  const styles: React.CSSProperties = {};
+  
+  if (!styleStr) return styles;
+  
+  styleStr.split(';').forEach(declaration => {
+    const [property, value] = declaration.split(':').map(s => s.trim());
+    if (property && value) {
+      // Convert kebab-case to camelCase
+      const camelProperty = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+      styles[camelProperty as keyof React.CSSProperties] = value;
+    }
+  });
+  
+  return styles;
+}
+
 /**
  * Default fallback component - renders element as-is with SafeSpan content
  */
@@ -191,13 +211,18 @@ export const defaultFallback = (element: Element, key: string): React.ReactNode
     'link', 'meta', 'param', 'source', 'track', 'wbr'
   ]);
 
+  // Handle style attribute separately to convert to object
+  const styleAttr = element.getAttribute('style');
+  const style = styleAttr ? parseStyleString(styleAttr) : undefined;
+
   const props = {
     key,
     ...(element.className ? { className: element.className } : {}),
     ...(element.id ? { id: element.id } : {}),
+    ...(style ? { style } : {}),
     ...Object.fromEntries(
       Array.from(element.attributes)
-        .filter(attr => !['class', 'id'].includes(attr.name))
+        .filter(attr => !['class', 'id', 'style'].includes(attr.name))
         .map(attr => [attr.name, attr.value])
     )
   };
@@ -257,15 +282,20 @@ export function transformElement(
       transformElement(child, `${key}-${index}`, config)
     );
 
+    // Handle style attribute separately to convert to object
+    const styleAttr = element.getAttribute('style');
+    const style = styleAttr ? parseStyleString(styleAttr) : undefined;
+
     return React.createElement(
       tagName,
       {
         key,
         ...(element.className ? { className: element.className } : {}),
         ...(element.id ? { id: element.id } : {}),
+        ...(style ? { style } : {}),
         ...Object.fromEntries(
           Array.from(element.attributes)
-            .filter(attr => !['class', 'id'].includes(attr.name))
+            .filter(attr => !['class', 'id', 'style'].includes(attr.name))
             .map(attr => [attr.name, attr.value])
         )
       },
@@ -277,6 +307,39 @@ export function transformElement(
   return fallbackComponent(element, key);
 }
 
+/**
+ * Clean up invalid DOM nesting that can cause React errors
+ */
+function cleanupInvalidNesting(html: string): string {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  
+  // Find paragraphs that contain block-level elements (invalid nesting)
+  const paragraphs = doc.querySelectorAll('p');
+  const blockElements = ['div', 'section', 'article', 'aside', 'header', 'footer', 'nav', 'main', 'figure', 'blockquote', 'pre', 'table', 'form', 'fieldset', 'address'];
+  
+  paragraphs.forEach(p => {
+    const hasBlockChildren = Array.from(p.children).some(child => 
+      blockElements.includes(child.tagName.toLowerCase())
+    );
+    
+    if (hasBlockChildren) {
+      // Convert paragraph to div to allow block children
+      const div = doc.createElement('div');
+      div.innerHTML = p.innerHTML;
+      
+      // Copy attributes
+      Array.from(p.attributes).forEach(attr => {
+        div.setAttribute(attr.name, attr.value);
+      });
+      
+      p.parentNode?.replaceChild(div, p);
+    }
+  });
+  
+  return doc.body.innerHTML;
+}
+
 /**
  * Transform HTML string to React components
  */
@@ -286,8 +349,11 @@ export function transformHtmlToReact(
 ): React.ReactNode[] {
   if (!html.trim()) return [];
 
+  // Clean up invalid DOM nesting first
+  const cleanHtml = cleanupInvalidNesting(html);
+  
   const parser = new DOMParser();
-  const doc = parser.parseFromString(html, 'text/html');
+  const doc = parser.parseFromString(cleanHtml, 'text/html');
   
   return Array.from(doc.body.children).map((element, index) =>
     transformElement(element, index.toString(), config)

package/src/utils/logger.ts

@@ -1,16 +1,71 @@
 /**
  * QwickApps React Framework - Logger Utility
  * 
- * Re-exports from @qwickapps/logging with framework-specific loggers
+ * Optional logging with fallback to console when @qwickapps/logging is not available
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-// Re-export everything from the logging package
-export * from '@qwickapps/logging';
+export interface Logger {
+  debug(message: string, ...args: any[]): void;
+  info(message: string, ...args: any[]): void;
+  warn(message: string, ...args: any[]): void;
+  error(message: string, ...args: any[]): void;
+}
 
-// Import createLogger and Logger type to create framework-specific loggers
-import { createLogger, Logger } from '@qwickapps/logging';
+/**
+ * Console-based logger fallback
+ */
+class ConsoleLogger implements Logger {
+  constructor(private name: string) {}
+
+  debug(message: string, ...args: any[]): void {
+    if (process.env.NODE_ENV !== 'production') {
+      console.debug(`[${this.name}] ${message}`, ...args);
+    }
+  }
+
+  info(message: string, ...args: any[]): void {
+    console.info(`[${this.name}] ${message}`, ...args);
+  }
+
+  warn(message: string, ...args: any[]): void {
+    console.warn(`[${this.name}] ${message}`, ...args);
+  }
+
+  error(message: string, ...args: any[]): void {
+    console.error(`[${this.name}] ${message}`, ...args);
+  }
+}
+
+/**
+ * No-op logger for when logging should be disabled
+ */
+class NoOpLogger implements Logger {
+  debug(): void {}
+  info(): void {}
+  warn(): void {}
+  error(): void {}
+}
+
+/**
+ * Create logger with optional @qwickapps/logging dependency
+ */
+function createLogger(name: string): Logger {
+  try {
+    // Try to use @qwickapps/logging if available
+    const logging = require('@qwickapps/logging');
+    return logging.createLogger(name);
+  } catch {
+    // Fallback to console-based logger
+    return new ConsoleLogger(name);
+  }
+}
+
+/**
+ * Re-export Logger type and createLogger function for compatibility
+ */
+export { createLogger };
 
 /**
  * Framework-specific loggers

package/dist/schemas/Builders.d.ts

@@ -1,7 +0,0 @@
-/**
- * Schema builders - Re-exported from @qwickapps/schema
- *
- * @deprecated Import directly from '@qwickapps/schema' instead
- */
-export { FieldBuilder, SchemaBuilder, ModelBuilder, createSchema, field, model, Fields } from '@qwickapps/schema';
-//# sourceMappingURL=Builders.d.ts.map

package/dist/schemas/Builders.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Builders.d.ts","sourceRoot":"","sources":["../../src/schemas/Builders.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,MAAM,EACP,MAAM,mBAAmB,CAAC"}

package/dist/schemas/types.d.ts

@@ -1,7 +0,0 @@
-/**
- * Schema types - Re-exported from @qwickapps/schema
- *
- * @deprecated Import directly from '@qwickapps/schema' instead
- */
-export { Schema, Model, FieldDefinition, DataType, FieldType, ValidationRules, EditorConfig } from '@qwickapps/schema';
-//# sourceMappingURL=types.d.ts.map

package/dist/schemas/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/schemas/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,MAAM,EACN,KAAK,EACL,eAAe,EACf,QAAQ,EACR,SAAS,EACT,eAAe,EACf,YAAY,EACb,MAAM,mBAAmB,CAAC"}

package/dist/types/DataBinding.d.ts

@@ -1,7 +0,0 @@
-/**
- * Data binding types - Re-exported from @qwickapps/schema
- *
- * @deprecated Import directly from '@qwickapps/schema' instead
- */
-export { DataBindingProps, DataBindingMeta, DataBindingOptions, WithDataBinding, DataBindingResult } from '@qwickapps/schema';
-//# sourceMappingURL=DataBinding.d.ts.map

package/dist/types/DataBinding.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataBinding.d.ts","sourceRoot":"","sources":["../../src/types/DataBinding.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EAClB,MAAM,mBAAmB,CAAC"}

package/dist/types/DataProvider.d.ts

@@ -1,7 +0,0 @@
-/**
- * Data provider interface - Re-exported from @qwickapps/schema
- *
- * @deprecated Import directly from '@qwickapps/schema' instead
- */
-export { IDataProvider, DataResponse, ModelInstance, SelectOptions } from '@qwickapps/schema';
-//# sourceMappingURL=DataProvider.d.ts.map

package/dist/types/DataProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataProvider.d.ts","sourceRoot":"","sources":["../../src/types/DataProvider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}