@qwickapps/react-framework 1.4.8 → 1.5.0

package/src/stories/SafeSpan.stories.tsx

@@ -484,8 +484,8 @@ export const SecurityTestingExample: Story = {
  ),
 };
 
-export const InteractiveExample: Story = {
- render: () => {
+// Interactive SafeSpan Component
+const InteractiveSafeSpanComponent = () => {
  const [htmlContent, setHtmlContent] = useState(safeHtml);
  const [placeholder, setPlaceholder] = useState('Enter some HTML content...');
 
@@ -608,5 +608,9 @@ export const InteractiveExample: Story = {
  </Content>
  </Section>
  );
- },
+};
+InteractiveSafeSpanComponent.displayName = 'InteractiveSafeSpanComponent';
+
+export const InteractiveExample: Story = {
+ render: () => <InteractiveSafeSpanComponent />,
 };

package/src/stories/Section.stories.tsx

@@ -212,7 +212,7 @@ export const ContentWidthVariants: Story = {
           <Typography variant="body2">Extra large container width (1536px max)</Typography>
         </Section>
         
-        <Section background="#fce4ec" padding="medium" contentMaxWidth={false as any}>
+        <Section background="#fce4ec" padding="medium" contentMaxWidth={undefined}>
           <Typography variant="h6" gutterBottom>Full Width (No Max Width)</Typography>
           <Typography variant="body2">Full width container with no maximum width constraint</Typography>
         </Section>
@@ -628,7 +628,7 @@ export const ModelViewBasic: Story = {
     });
 
     // Show ModelView metadata
-    const ComponentClass = sectionInstance.constructor as any;
+    const ComponentClass = sectionInstance.constructor as { tagName?: string; version?: string };
     const metadata = {
       tagName: ComponentClass.tagName,
       version: ComponentClass.version,

package/src/stories/Text.stories.tsx

@@ -4,12 +4,10 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Box, Divider, Typography, Alert, Paper, Grid } from '@mui/material';
+import { Box, Typography, Alert } from '@mui/material';
 import { JsonDataProvider } from '@qwickapps/schema';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Text } from '../components/blocks';
-import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
-import { ModelView } from '../components/base/ModelView';
 import { makeSerializationStory } from './_templates/SerializationTemplate';
 import QwickApp from '../components/QwickApp';
 import React from 'react';

package/src/stories/_templates/SerializationTemplate.tsx

@@ -20,7 +20,6 @@
  */
 
 import React from 'react';
-import { ComponentTransformer } from '../../schemas/transformers/ComponentTransformer';
 import { registerSerializableComponents } from '../../schemas/transformers/registry';
 import { Code } from '../../components/blocks/Code';
 import { Box, Typography } from '@mui/material';

package/src/templates/TemplateResolver.ts

@@ -111,7 +111,7 @@ export class TemplateResolver implements ITemplateResolver {
    * Create lazy loading context for template resolution
    * Only fetches data when accessed by mustache template
    */
-  private async createLazyContext(template: string): Promise<any> {
+  private async createLazyContext(template: string): Promise<unknown> {
     // Extract field group IDs from template
     const mustachePattern = /\{\{([^}]+)\}\}/g;
     const matches = Array.from(template.matchAll(mustachePattern));
@@ -124,7 +124,7 @@ export class TemplateResolver implements ITemplateResolver {
     }
 
     // Fetch all needed data
-    const contextData: Record<string, any> = {};
+    const contextData: Record<string, unknown> = {};
 
     for (const fieldGroupId of fieldGroups) {
       try {

package/src/types/CollapsibleLayout.ts

@@ -7,7 +7,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import type { WithDataBinding, SchemaProps } from '@qwickapps/schema';
 import type { WithBaseProps } from '../hooks/useBaseProps';
 import CollapsibleLayoutModel from '../schemas/CollapsibleLayoutSchema';
@@ -133,7 +133,7 @@ export interface CollapsibleLayoutProps extends CollapsibleLayoutViewProps, With
 /**
  * Type guard to check if a component has CollapsibleLayout props
  */
-export function isCollapsibleLayoutProps(props: any): props is CollapsibleLayoutProps {
+export function isCollapsibleLayoutProps(props: unknown): props is CollapsibleLayoutProps {
   return props && typeof props === 'object' && ('collapsed' in props || 'defaultCollapsed' in props);
 }
 

package/src/types/ContentProxy.ts

@@ -26,9 +26,9 @@ export class DataProxy implements Data {
   public maxRows?: number;
   public autoCreate?: boolean;
 
-  private data: Record<string, any>;
+  private data: Record<string, unknown>;
 
-  constructor(content: Data, data: Record<string, any> = {}) {
+  constructor(content: Data, data: Record<string, unknown> = {}) {
     Object.assign(this, content);
     this.data = data;
 
@@ -50,7 +50,7 @@ export class DataProxy implements Data {
    * Get nested value from data using dot notation
    * Supports: company.name, user.profile.avatar.url, etc.
    */
-  private getNestedValue(path: string): any {
+  private getNestedValue(path: string): unknown {
     const keys = path.split('.');
     let current = this.data;
 
@@ -67,7 +67,7 @@ export class DataProxy implements Data {
   /**
    * Set nested value in data using dot notation
    */
-  public setNestedValue(path: string, value: any): void {
+  public setNestedValue(path: string, value: unknown): void {
     const keys = path.split('.');
     const lastKey = keys.pop()!;
     let current = this.data;
@@ -86,14 +86,14 @@ export class DataProxy implements Data {
   /**
    * Get all data including nested structures
    */
-  public getData(): Record<string, any> {
+  public getData(): Record<string, unknown> {
     return this.data;
   }
 
   /**
    * Update data while preserving nested structure
    */
-  public updateData(newData: Record<string, any>): void {
+  public updateData(newData: Record<string, unknown>): void {
     this.data = { ...this.data, ...newData };
   }
 }

package/src/types/DataTypes.ts

@@ -33,9 +33,9 @@ export interface Field extends BaseContent {
   /** The type of field */
   type: string;
   /** Current value of the field */
-  value?: any;
+  value?: unknown;
   /** Default value for the field */
-  defaultValue?: any;
+  defaultValue?: unknown;
   /** Whether this field is required */
   required?: boolean;
   /** Placeholder text for input fields */
@@ -43,7 +43,7 @@ export interface Field extends BaseContent {
   /** Help text or instructions */
   instructions?: string;
   /** Options for select/radio/checkbox fields */
-  choices?: Array<{ label: string; value: any }>;
+  choices?: Array<{ label: string; value: unknown }>;
   /** Minimum value (for numbers) or length (for text) */
   min?: number;
   /** Maximum value (for numbers) or length (for text) */
@@ -113,7 +113,7 @@ export interface FormField extends Field {
     minLength?: number;
     maxLength?: number;
     pattern?: RegExp;
-    custom?: (value: any) => boolean | string;
+    custom?: (value: unknown) => boolean | string;
   };
 }
 

package/src/types/TemplateProvider.ts

@@ -5,5 +5,5 @@
  */
 export interface TemplateProvider {
   /** Resolve template with given context using mustache syntax */
-  resolve(template: string, context: any): string;
+  resolve(template: string, context: unknown): string;
 }

package/src/types/TemplateResolver.ts

@@ -11,7 +11,7 @@ export interface TemplateResolverConfig {
   /** Template resolver (optional, defaults to MustacheTemplateResolver) */
   templateResolver?: TemplateProvider;
   /** Cache provider (optional, defaults to MemoryCacheProvider, false = no cache) */
-  cacheProvider?: ICacheProvider<any[]> | boolean;
+  cacheProvider?: ICacheProvider<unknown[]> | boolean;
   /** Enable debug logging */
   enableLogging?: boolean;
 }/**

package/src/utils/htmlTransform.tsx

@@ -7,7 +7,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Box, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 import React from 'react';
 import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
 
@@ -19,7 +19,7 @@ export interface TransformRule {
 export interface TransformConfig {
   rules: TransformRule[];
   sanitize?: boolean;
-  sanitizeOptions?: any;
+  sanitizeOptions?: Record<string, unknown>;
   fallbackComponent?: (element: Element, key: string) => React.ReactNode;
 }
 
@@ -41,7 +41,8 @@ export const defaultArticleRules: TransformRule[] = [
       // Use ComponentTransformer to create Code component
       const codeData = {
         tagName: 'Code',
-        props: {
+        version: '1.0.0',
+        data: {
           language,
           showCopy: true,
           showLineNumbers: false,
@@ -76,7 +77,8 @@ export const defaultArticleRules: TransformRule[] = [
         // Use ComponentTransformer to create Code component
         const codeData = {
           tagName: 'Code',
-          props: {
+          version: '1.0.0',
+          data: {
             language: 'text',
             showCopy: true,
             showLineNumbers: false,
@@ -107,12 +109,14 @@ export const defaultArticleRules: TransformRule[] = [
       // Use ComponentTransformer to create Section component
       const sectionData = {
         tagName: 'Section',
-        props: {
+        version: '1.0.0',
+        data: {
           padding: spacing || 'medium',
           children: [
             title && {
               tagName: 'Typography',
-              props: {
+              version: '1.0.0',
+              data: {
                 variant: 'h4',
                 component: 'h2',
                 sx: { mb: 2 },
@@ -133,7 +137,7 @@ export const defaultArticleRules: TransformRule[] = [
   // Button elements → Button component
   {
     selector: 'button',
-    transform: (element: Element, key: string) => {
+    transform: (element: Element) => {
       const text = element.textContent || '';
       const variant = element.getAttribute('data-variant') || 'contained';
       const disabled = element.hasAttribute('disabled');
@@ -141,7 +145,8 @@ export const defaultArticleRules: TransformRule[] = [
       // Use ComponentTransformer to create Button component
       const buttonData = {
         tagName: 'Button',
-        props: {
+        version: '1.0.0',
+        data: {
           variant,
           disabled,
           label: text
@@ -171,7 +176,8 @@ export const defaultMarkdownRules: TransformRule[] = [
       // Use ComponentTransformer to create Code component
       const codeData = {
         tagName: 'Code',
-        props: {
+        version: '1.0.0',
+        data: {
           language,
           showCopy: true,
           showLineNumbers: false,
@@ -190,7 +196,7 @@ export const defaultMarkdownRules: TransformRule[] = [
   // Inline code → preserve as regular code element (no transformation)
   {
     selector: 'code',
-    transform: (element: Element, key: string) => {
+    transform: (element: Element) => {
       // Skip if inside pre (already handled above)
       if (element.closest('pre')) return null;
 
@@ -213,7 +219,7 @@ function parseStyleString(styleStr: string): React.CSSProperties {
     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 as any;
+      styles[camelProperty as keyof React.CSSProperties] = value as string;
     }
   });
   

package/src/utils/iconMap.tsx

@@ -0,0 +1,221 @@
+/**
+ * Icon Mapping Utility
+ * 
+ * Provides centralized icon mapping for both Material-UI components and emoji representations.
+ * Used across the framework for consistent icon rendering in buttons, navigation, admin UI, etc.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import {
+  Article,
+  Home,
+  Book,
+  Download,
+  CloudDownload,
+  CloudUpload,
+  Computer,
+  Settings,
+  Dashboard,
+  Info,
+  Inventory,
+  Inventory2,
+  Help,
+  Add,
+  Edit,
+  Delete,
+  Check,
+  Close,
+  ArrowForward,
+  ArrowBack,
+  Menu,
+  Search,
+  Favorite,
+  Star,
+  Share,
+  Save,
+  Send,
+  Email,
+  Phone,
+  Person,
+  Group,
+  Business,
+  ShoppingCart,
+  Speed,
+  SupportAgent,
+  Tune,
+  AttachMoney,
+  Lock,
+  LockOpen,
+  Visibility,
+  VisibilityOff,
+  // New icons for seed content
+  Psychology,
+  Autorenew,
+  Code,
+  IntegrationInstructions,
+  Construction,
+  Work,
+  Layers,
+  TrendingUp,
+  Route,
+  Sync,
+  Architecture,
+  Security,
+  VerifiedUser,
+} from '@mui/icons-material';
+
+/**
+ * Icon mapping entry with both Material-UI component and emoji representation
+ */
+export interface IconMapping {
+  emoji: string;
+  component: React.ComponentType;
+}
+
+/**
+ * Centralized icon registry mapping icon names to their representations
+ * Supports both Material-UI components and emoji for different contexts
+ */
+export const iconMap: Record<string, IconMapping> = {
+  // Navigation & Layout
+  home: { emoji: '🏠', component: Home },
+  menu: { emoji: '☰', component: Menu },
+  dashboard: { emoji: '📊', component: Dashboard },
+  
+  // Information & Help
+  info: { emoji: 'ℹ️', component: Info },
+  about: { emoji: 'ℹ️', component: Info },
+  help: { emoji: '❓', component: Help },
+  book: { emoji: '📖', component: Book },
+  
+  // Communication
+  email: { emoji: '📧', component: Email },
+  contact: { emoji: '📧', component: Email },
+  phone: { emoji: '📱', component: Phone },
+  send: { emoji: '📤', component: Send },
+  
+  // Actions
+  add: { emoji: '➕', component: Add },
+  edit: { emoji: '✏️', component: Edit },
+  delete: { emoji: '🗑️', component: Delete },
+  save: { emoji: '💾', component: Save },
+  check: { emoji: '✓', component: Check },
+  close: { emoji: '✕', component: Close },
+  
+  // Navigation
+  arrowforward: { emoji: '→', component: ArrowForward },
+  arrowback: { emoji: '←', component: ArrowBack },
+  
+  // Content
+  search: { emoji: '🔍', component: Search },
+  share: { emoji: '🔗', component: Share },
+  download: { emoji: '⬇️', component: Download },
+  clouddownload: { emoji: '☁️⬇️', component: CloudDownload },
+  cloudupload: { emoji: '☁️⬆️', component: CloudUpload },
+  
+  // User & Social
+  person: { emoji: '👤', component: Person },
+  user: { emoji: '👤', component: Person },
+  group: { emoji: '👥', component: Group },
+  favorite: { emoji: '❤️', component: Favorite },
+  star: { emoji: '⭐', component: Star },
+  verified_user: { emoji: '✅', component: VerifiedUser },
+  
+  // Business
+  business: { emoji: '🏢', component: Business },
+  shoppingcart: { emoji: '🛒', component: ShoppingCart },
+  cart: { emoji: '🛒', component: ShoppingCart },
+  attachmoney: { emoji: '💰', component: AttachMoney },
+  
+  // Security
+  lock: { emoji: '🔒', component: Lock },
+  lockopen: { emoji: '🔓', component: LockOpen },
+  visibility: { emoji: '👁️', component: Visibility },
+  visibilityoff: { emoji: '🙈', component: VisibilityOff },
+  
+  // System
+  settings: { emoji: '⚙️', component: Settings },
+  computer: { emoji: '💻', component: Computer },
+  
+  // Content Types
+  article: { emoji: '📰', component: Article },
+  blog: { emoji: '📝', component: Book },
+  news: { emoji: '📰', component: Book },
+  products: { emoji: '🛍️', component: ShoppingCart },
+  services: { emoji: '⚙️', component: Settings },
+  portfolio: { emoji: '💼', component: Business },
+  gallery: { emoji: '🖼️', component: Business },
+  inventory: { emoji: '📦', component: Inventory },
+  inventory_2: { emoji: '📦', component: Inventory2 },
+  speed: { emoji: '⚡', component: Speed },
+  support_agent: { emoji: '🛎️', component: SupportAgent },
+  tune: { emoji: '🎛️', component: Tune },
+
+  // Development & Technology
+  code: { emoji: '💻', component: Code },
+  psychology: { emoji: '🧠', component: Psychology },
+  autorenew: { emoji: '🔄', component: Autorenew },
+  integration_instructions: { emoji: '🔌', component: IntegrationInstructions },
+  construction: { emoji: '🚧', component: Construction },
+  work: { emoji: '💼', component: Work },
+  layers: { emoji: '📚', component: Layers },
+  trending_up: { emoji: '📈', component: TrendingUp },
+  route: { emoji: '🗺️', component: Route },
+  sync: { emoji: '🔄', component: Sync },
+  architecture: { emoji: '🏛️', component: Architecture },
+  security: { emoji: '🔐', component: Security },
+};
+
+/**
+ * Get emoji representation of an icon
+ * @param iconName - Icon name (case-insensitive)
+ * @param fallback - Fallback emoji if icon not found (default: 🔗)
+ * @returns Emoji string
+ */
+export function getIconEmoji(iconName: string | undefined, fallback: string = '🔗'): string {
+  if (!iconName) return fallback;
+  const mapping = iconMap[iconName.toLowerCase()];
+  return mapping?.emoji || iconName;
+}
+
+/**
+ * Get Material-UI component representation of an icon
+ * @param iconName - Icon name (case-insensitive)
+ * @returns React element or null if not found
+ */
+export function getIconComponent(iconName: string | undefined): React.ReactElement | null {
+  if (!iconName) return null;
+  
+  const mapping = iconMap[iconName.toLowerCase()];
+  if (!mapping?.component) {
+    console.warn(`[IconMap] Icon "${iconName}" not found in registry`);
+    return null;
+  }
+  
+  const IconComponent = mapping.component;
+  return <IconComponent />;
+}
+
+/**
+ * Register a new icon or override an existing one
+ * Useful for application-specific icon extensions
+ */
+export function registerIcon(name: string, mapping: IconMapping): void {
+  iconMap[name.toLowerCase()] = mapping;
+}
+
+/**
+ * Check if an icon is registered
+ */
+export function hasIcon(iconName: string): boolean {
+  return iconName.toLowerCase() in iconMap;
+}
+
+/**
+ * Get all registered icon names
+ */
+export function getRegisteredIcons(): string[] {
+  return Object.keys(iconMap);
+}

package/src/utils/index.ts

@@ -1,12 +1,15 @@
 /**
  * Utility functions and types for QwickApps React Framework
- * 
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 export * from './cssUtils';
 export * from './customPaletteManager';
 export * from './dimensions';
+export * from './iconMap';
 export * from './logger';
+export * from './paletteLoader';
+export * from './paletteManifest';
 export * from './paletteUtils';
 export * from './persistenceUtils';
 export * from './reactUtils';

package/src/utils/logger.ts

@@ -7,10 +7,10 @@
  */
 
 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;
+  debug(message: string, ...args: unknown[]): void;
+  info(message: string, ...args: unknown[]): void;
+  warn(message: string, ...args: unknown[]): void;
+  error(message: string, ...args: unknown[]): void;
 }
 
 /**
@@ -19,34 +19,39 @@ export interface Logger {
 class ConsoleLogger implements Logger {
   constructor(private name: string) {}
 
-  debug(message: string, ...args: any[]): void {
+  debug(message: string, ...args: unknown[]): void {
     if (process.env.NODE_ENV !== 'production') {
       console.debug(`[${this.name}] ${message}`, ...args);
     }
   }
 
-  info(message: string, ...args: any[]): void {
+  info(message: string, ...args: unknown[]): void {
     console.info(`[${this.name}] ${message}`, ...args);
   }
 
-  warn(message: string, ...args: any[]): void {
+  warn(message: string, ...args: unknown[]): void {
     console.warn(`[${this.name}] ${message}`, ...args);
   }
 
-  error(message: string, ...args: any[]): void {
+  error(message: string, ...args: unknown[]): void {
     console.error(`[${this.name}] ${message}`, ...args);
   }
 }
 
 /**
  * No-op logger for when logging should be disabled
+ * Not currently used but available for future configuration options
  */
-class NoOpLogger implements Logger {
-  debug(): void {}
-  info(): void {}
-  warn(): void {}
-  error(): void {}
-}
+// class NoOpLogger implements Logger {
+//   // intentionally empty - no-op logger
+//   debug(): void {}
+//   // intentionally empty - no-op logger
+//   info(): void {}
+//   // intentionally empty - no-op logger
+//   warn(): void {}
+//   // intentionally empty - no-op logger
+//   error(): void {}
+// }
 
 /**
  * Create logger with optional @qwickapps/logging dependency
@@ -54,6 +59,7 @@ class NoOpLogger implements Logger {
 function getLogger(name: string): Logger {
   try {
     // Try to use @qwickapps/logging if available
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
     const logging = require('@qwickapps/logging');
     return logging.getLogger(name);
   } catch {