@qwickapps/react-framework 1.4.8 → 1.5.0

package/src/contexts/DataContext.tsx

@@ -8,7 +8,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import React, { createContext, useContext, useEffect, useState, useCallback, ReactNode } from 'react';
 import { ITemplateResolver, TemplateResolverConfig } from '../types';
 import { TemplateResolver } from '../templates';
 import { Model } from '@qwickapps/schema';
@@ -19,7 +19,7 @@ import { Model } from '@qwickapps/schema';
 interface DataContextValue {
   provider: ITemplateResolver | null;
   get<T extends Model>(slug: string): Promise<T | undefined>;
-  select<T extends Model>(schema: string, options?: any): Promise<T[]>;
+  select<T extends Model>(schema: string, options?: unknown): Promise<T[]>;
   resolveTemplate(template: string): Promise<string>;
 }
 
@@ -67,7 +67,7 @@ export function DataProvider({ dataSource, children }: DataProviderProps) {
       const result = await dataProvider.get(slug);
       return result && result.data ? (result.data as T) : undefined;
     },
-    select: async <T extends Model>(schema: string, options?: any): Promise<T[]> => {
+    select: async <T extends Model>(schema: string, options?: unknown): Promise<T[]> => {
       const result = await dataProvider.select(schema, options);
       return result && Array.isArray(result.data) ? (result.data as T[]) : [];
     },
@@ -106,35 +106,45 @@ export function useDataSafe<T extends Model>(slug: string): {
   error: Error | null;
 } {
   const context = useContext(DataContext);
-  if (!context) {
-    return { data: undefined, loading: false, error: null };
-  }
 
+  // Always call hooks before any returns
   const [data, setData] = useState<T | undefined>(undefined);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
-  const fetchData = async () => {
-    if (!slug) {
+  // Always call useEffect unconditionally
+  useEffect(() => {
+    // Only fetch if context exists
+    if (!context) {
       setLoading(false);
       return;
     }
 
-    try {
-      setLoading(true);
-      setError(null);
-      const result = await context.get<T>(slug);
-      setData(result);
-      setLoading(false);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error(String(err)));
-      setLoading(false);
-    }
-  };
+    const fetchData = async () => {
+      if (!slug) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError(null);
+        const result = await context.get<T>(slug);
+        setData(result);
+        setLoading(false);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setLoading(false);
+      }
+    };
 
-  useEffect(() => {
     fetchData();
-  }, [slug]);
+  }, [context, slug]);
+
+  // Return early if no context
+  if (!context) {
+    return { data: undefined, loading: false, error: null };
+  }
 
   return { data, loading, error };
 }
@@ -156,7 +166,7 @@ export function useData<T extends Model>(fieldGroupId: string): {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
-  const fetchData = async () => {
+  const fetchData = useCallback(async () => {
     if (!fieldGroupId) {
       setLoading(false);
       return;
@@ -172,16 +182,16 @@ export function useData<T extends Model>(fieldGroupId: string): {
       setError(err instanceof Error ? err : new Error(String(err)));
       setLoading(false);
     }
-  };
+  }, [fieldGroupId, get]);
 
   useEffect(() => {
     fetchData();
-  }, [fieldGroupId, get]);
+  }, [fetchData]);
 
-  return { 
-    data, 
-    loading, 
-    error, 
+  return {
+    data,
+    loading,
+    error,
     refetch: fetchData
   };
 }
@@ -258,33 +268,29 @@ export function useDataProvider(): ITemplateResolver {
  * <T template="Hello {{user.name}}" fallback="Guest" />
  * ```
  */
-export const T: React.FC<{ template: string; fallback?: ReactNode; wrapper?: React.ComponentType<{ children: ReactNode }> }> = ({ 
-  template, 
+export const T: React.FC<{ template: string; fallback?: ReactNode; wrapper?: React.ComponentType<{ children: ReactNode }> }> = ({
+  template,
   fallback,
-  wrapper: Wrapper 
+  wrapper: Wrapper
 }) => {
-  try {
-    const context = useContext(DataContext);
-    if (!context) {
-      throw new Error('T component must be used within a DataProvider. Did you wrap your component with <DataProvider>?');
-    }
+  const context = useContext(DataContext);
+  if (!context) {
+    throw new Error('T component must be used within a DataProvider. Did you wrap your component with <DataProvider>?');
+  }
 
-    const { resolved, loading, error } = useResolveTemplate(template);
-    
-    if (loading) {
-      return fallback ? <>{fallback}</> : null;
-    } else if (error) {
-      if (process.env.NODE_ENV === 'development') {
-        return <>[Template Error: {error.message}]</>;
-      } else {
-        return fallback ? <>{fallback}</> : null;
-      }
+  const { resolved, loading, error } = useResolveTemplate(template);
+
+  if (loading) {
+    return fallback ? <>{fallback}</> : null;
+  } else if (error) {
+    if (process.env.NODE_ENV === 'development') {
+      return <>[Template Error: {error.message}]</>;
     } else {
-      const content = <>{resolved}</>;
-      return Wrapper ? <Wrapper>{content}</Wrapper> : content;
+      return fallback ? <>{fallback}</> : null;
     }
-  } catch (error) {
-    throw error;
+  } else {
+    const content = <>{resolved}</>;
+    return Wrapper ? <Wrapper>{content}</Wrapper> : content;
   }
 };
 
@@ -321,7 +327,7 @@ export function useTemplate(template: string): string | null {
  * {t.wrap(CustomComponent)`{{company.slogan}}`}
  * ```
  */
-export function t(strings: TemplateStringsArray, ...values: any[]): ReactNode {
+export function t(strings: TemplateStringsArray, ...values: unknown[]): ReactNode {
   // First do regular template literal interpolation
   const template = String.raw(strings, ...values);
   
@@ -343,7 +349,7 @@ export function t(strings: TemplateStringsArray, ...values: any[]): ReactNode {
  * ```
  */
 t.wrap = (WrapperComponent: React.ComponentType<{ children: ReactNode }>) => 
-  (strings: TemplateStringsArray, ...values: any[]): ReactNode => {
+  (strings: TemplateStringsArray, ...values: unknown[]): ReactNode => {
     const template = String.raw(strings, ...values);
     
     const WrappedTemplate = () => {

package/src/contexts/PaletteContext.tsx

@@ -6,11 +6,12 @@
 
 import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
 import { AllPalettes } from '../palettes';
-import { 
-  loadUserPalettePreference, 
-  saveUserPalettePreference, 
-  clearUserPalettePreference 
+import {
+  loadUserPalettePreference,
+  saveUserPalettePreference,
+  clearUserPalettePreference
 } from '../utils/persistenceUtils';
+import { loadPalette } from '../utils/paletteLoader';
 
 // Type definitions
 export interface PaletteConfig {
@@ -136,15 +137,27 @@ export const PaletteProvider: React.FC<PaletteProviderProps> = ({
   // Apply palette to document root immediately and on changes
   useEffect(() => {
     if (typeof document !== 'undefined') {
-      document.documentElement.setAttribute('data-palette', currentPalette);
-      
-      // Dispatch custom event to notify theme system (with small delay to ensure CSS is applied)
-      setTimeout(() => {
+      // Dynamically load the palette CSS if not already loaded
+      loadPalette(currentPalette).then(() => {
+        // Set the data-palette attribute after CSS is loaded
+        document.documentElement.setAttribute('data-palette', currentPalette);
+
+        // Dispatch custom event to notify theme system (with small delay to ensure CSS is applied)
+        setTimeout(() => {
+          const event = new CustomEvent('palette-changed', {
+            detail: { palette: currentPalette }
+          });
+          window.dispatchEvent(event);
+        }, 50);
+      }).catch((error) => {
+        console.error(`[PaletteContext] Failed to load palette "${currentPalette}":`, error);
+        // Still set the attribute and dispatch event even if loading fails
+        document.documentElement.setAttribute('data-palette', currentPalette);
         const event = new CustomEvent('palette-changed', {
           detail: { palette: currentPalette }
         });
         window.dispatchEvent(event);
-      }, 50);
+      });
     }
   }, [currentPalette]);
 

package/src/contexts/PrintModeContext.tsx

@@ -191,7 +191,7 @@ export const PrintModeProvider: React.FC<PrintModeProviderProps> = ({ children }
       
       if (state.printConfig.theme) {
         dispatch({ type: 'SET_ORIGINAL_THEME', theme: getCurrentTheme() });
-        setCurrentTheme(state.printConfig.theme as any);
+        setCurrentTheme(state.printConfig.theme as 'light' | 'dark');
       }
       
       if (state.printConfig.palette) {
@@ -261,7 +261,7 @@ export const PrintModeProvider: React.FC<PrintModeProviderProps> = ({ children }
       
       // Restore original theme and palette
       if (state.originalTheme) {
-        setCurrentTheme(state.originalTheme as any);
+        setCurrentTheme(state.originalTheme as 'light' | 'dark');
       }
       
       if (state.originalPalette) {
@@ -293,7 +293,7 @@ export const PrintModeProvider: React.FC<PrintModeProviderProps> = ({ children }
     }
   }, [state.printModeState]);
 
-  // Effect to handle browser print events (stable handlers using refs)
+  // Effect to handle browser print events
   useEffect(() => {
     const handleBeforePrint = () => {
       triggerPrint();
@@ -312,7 +312,7 @@ export const PrintModeProvider: React.FC<PrintModeProviderProps> = ({ children }
         window.removeEventListener('afterprint', handleAfterPrint);
       };
     }
-  }, []); // Empty dependency array for stable event handlers
+  }, [exitPrintMode, triggerPrint]);
 
   const contextValue: PrintModeContextValue = {
     printModeState: state.printModeState,

package/src/contexts/ThemeContext.tsx

@@ -242,7 +242,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     const surfaceMain = getCSSCustomProperty('--theme-surface') || (isDark ? '#1e1e1e' : '#ffffff');
 
     const textPrimary = getCSSCustomProperty('--theme-text-primary') || (isDark ? '#ffffff' : '#000000');
-    const textSecondary = getCSSCustomProperty('--theme-text-secondary') || (isDark ? '#000000' : '#ffffff');
+    const textSecondary = getCSSCustomProperty('--theme-text-secondary') || (isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.6)');
     const textDisabled = getCSSCustomProperty('--theme-on-disabled') || (isDark ? 'rgba(255, 255, 255, 0.38)' : 'rgba(0, 0, 0, 0.38)');
 
     return createTheme({
@@ -303,7 +303,8 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
         },
       },
   });
-  }, [actualThemeMode, paletteChangeCounter]); // paletteChangeCounter is needed to force theme rebuild // Re-create theme when palette changes
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actualThemeMode, paletteChangeCounter]); // paletteChangeCounter is needed to force theme rebuild
 
   // Theme preference management methods
   const setPreferredTheme = (theme: ThemeMode): void => {

package/src/hooks/useBaseProps.ts

@@ -70,11 +70,11 @@ export interface BaseComponentProps {
   'data-testid'?: string;
   
   // Common event handlers (generic for compatibility)
-  onClick?: React.MouseEventHandler<any>;
-  onMouseEnter?: React.MouseEventHandler<any>;
-  onMouseLeave?: React.MouseEventHandler<any>;
-  onFocus?: React.FocusEventHandler<any>;
-  onBlur?: React.FocusEventHandler<any>;
+  onClick?: React.MouseEventHandler<unknown>;
+  onMouseEnter?: React.MouseEventHandler<unknown>;
+  onMouseLeave?: React.MouseEventHandler<unknown>;
+  onFocus?: React.FocusEventHandler<unknown>;
+  onBlur?: React.FocusEventHandler<unknown>;
 }
 
 /**
@@ -203,8 +203,8 @@ export function useBaseProps<T extends BaseComponentProps>(props: T) {
 
   // Memoize background and text styles
   const backgroundAndTextStyles = useMemo(() => {
-    const styles: any = {};
-    
+    const styles: Record<string, unknown> = {};
+
     if (backgroundGradient) {
       styles.background = backgroundGradient;
     } else if (backgroundImage) {
@@ -216,11 +216,11 @@ export function useBaseProps<T extends BaseComponentProps>(props: T) {
       // Could be a color or theme path
       styles.background = background;
     }
-    
+
     if (textAlign) {
       styles.textAlign = textAlign;
     }
-    
+
     return styles;
   }, [background, backgroundImage, backgroundGradient, textAlign]);
 
@@ -264,4 +264,4 @@ export function useBaseProps<T extends BaseComponentProps>(props: T) {
 /**
  * Type helper for components using base props
  */
-export type WithBaseProps<P = {}> = P & BaseComponentProps;
+export type WithBaseProps<P = Record<string, never>> = P & BaseComponentProps;

package/src/hooks/useDataBinding.ts

@@ -8,7 +8,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { DataBindingMeta, DataBindingOptions, Model, SchemaDefinition } from '@qwickapps/schema';
+import { DataBindingMeta, Model } from '@qwickapps/schema';
 import { useMemo } from 'react';
 import { useDataSafe } from '../contexts/DataContext';
 
@@ -23,15 +23,13 @@ import { useDataSafe } from '../contexts/DataContext';
  */
 export function useDataBinding<T extends Model>(
   dataSource?: string,
-  fallbackProps?: Partial<T>,
-  schema?: SchemaDefinition,
-  options?: DataBindingOptions
+  fallbackProps?: Partial<T>
 ): T & DataBindingMeta {
   // Determine if we should use data binding
   const isDataSourceAvailable = dataSource && dataSource.trim().length > 0;
 
-  // Get data if dataSource is provided
-  const safeDataResult = isDataSourceAvailable ? useDataSafe(dataSource) : { data: undefined, loading: false, error: null };
+  // Get data - always call the hook unconditionally, but pass empty string if not available
+  const safeDataResult = useDataSafe(isDataSourceAvailable ? dataSource : '');
 
   // Resolve the final props
   const resolvedData = useMemo(() => {
@@ -46,16 +44,15 @@ export function useDataBinding<T extends Model>(
     } as Partial<T>;
 
     return resolved;
+  }, [isDataSourceAvailable, safeDataResult.data, fallbackProps]);
 
-  }, [isDataSourceAvailable, safeDataResult.data, fallbackProps, schema, options]);
-
-  // Build the data binding metadata
-  const metadata: DataBindingMeta = {
-    loading: safeDataResult.loading,
-    error: safeDataResult.error,
-    dataSource,
-    cached: false // TODO: Implement cache detection
-  };
+  // Build the data binding metadata (not currently returned but available for future use)
+  // const metadata: DataBindingMeta = {
+  //   loading: safeDataResult.loading,
+  //   error: safeDataResult.error,
+  //   dataSource,
+  //   cached: false // TODO: Implement cache detection
+  // };
 
   // Return resolved data with metadata, ensuring data properties aren't overridden
   return {
@@ -66,10 +63,10 @@ export function useDataBinding<T extends Model>(
     $dataSource: dataSource,
     $cached: false,
     // Keep old names for backward compatibility, but data takes precedence
-    ...(resolvedData.hasOwnProperty('loading') ? {} : { loading: safeDataResult.loading }),
-    ...(resolvedData.hasOwnProperty('error') ? {} : { error: safeDataResult.error }),
+    ...(Object.prototype.hasOwnProperty.call(resolvedData, 'loading') ? {} : { loading: safeDataResult.loading }),
+    ...(Object.prototype.hasOwnProperty.call(resolvedData, 'error') ? {} : { error: safeDataResult.error }),
     cached: false
-  } as any;
+  } as T & DataBindingMeta;
 }
 
 // Old validation function removed - using new schema system

package/src/hooks/usePrintMode.ts

@@ -43,11 +43,11 @@ export interface PrintModeState {
 
 /**
  * Hook to access print mode state from app-level context
- * 
- * @param initialConfig - Initial print configuration (ignored, use context provider config)
+ *
+ * @param _initialConfig - Initial print configuration (ignored, use context provider config)
  * @returns Print mode state and controls
  */
-export function usePrintMode(initialConfig?: Partial<PrintConfigSchema>): PrintModeState {
+export function usePrintMode(): PrintModeState {
   const context = usePrintModeContext();
   
   // Map context interface to legacy interface

package/src/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 // QwickApps React Framework
 // Main export file for the QwickApps React Framework
 

package/src/palettes/manifest.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "./manifest.schema.json",
+  "version": "1.4.9",
+  "palettes": [
+    {
+      "id": "default",
+      "name": "Default",
+      "description": "Classic blue and neutral color scheme - the original QwickApps palette",
+      "author": "QwickApps",
+      "license": "PolyForm-Shield-1.0.0",
+      "version": "1.4.9",
+      "file": "PaletteDefault.css",
+      "primaryColor": "#007bff",
+      "inlined": true
+    },
+    {
+      "id": "autumn",
+      "name": "Autumn",
+      "description": "Warm oranges, golden yellows, and earthy browns - inspired by fall foliage",
+      "author": "QwickApps",
+      "license": "PolyForm-Shield-1.0.0",
+      "version": "1.4.9",
+      "file": "PaletteAutumn.css",
+      "primaryColor": "#ea580c",
+      "inlined": false
+    },
+    {
+      "id": "cosmic",
+      "name": "Cosmic",
+      "description": "Modern purple gradient for creative and tech brands - inspired by cosmic nebulae",
+      "author": "QwickApps",
+      "license": "PolyForm-Shield-1.0.0",
+      "version": "1.4.9",
+      "file": "PaletteCosmic.css",
+      "primaryColor": "#8b5cf6",
+      "inlined": false
+    },
+    {
+      "id": "ocean",
+      "name": "Ocean",
+      "description": "Deep blues, aqua teals, and seafoam greens - inspired by ocean depths",
+      "author": "QwickApps",
+      "license": "PolyForm-Shield-1.0.0",
+      "version": "1.4.9",
+      "file": "PaletteOcean.css",
+      "primaryColor": "#0891b2",
+      "inlined": false
+    },
+    {
+      "id": "spring",
+      "name": "Spring",
+      "description": "Fresh greens, soft pinks, and bright yellows - inspired by spring blooms",
+      "author": "QwickApps",
+      "license": "PolyForm-Shield-1.0.0",
+      "version": "1.4.9",
+      "file": "PaletteSpring.css",
+      "primaryColor": "#16a34a",
+      "inlined": false
+    },
+    {
+      "id": "winter",
+      "name": "Winter",
+      "description": "Cool blues, icy whites, and frosty grays - inspired by winter landscapes",
+      "author": "QwickApps",
+      "license": "PolyForm-Shield-1.0.0",
+      "version": "1.4.9",
+      "file": "PaletteWinter.css",
+      "primaryColor": "#0077be",
+      "inlined": false
+    }
+  ]
+}

package/src/palettes/manifest.schema.json

@@ -0,0 +1,74 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "QwickApps Palette Manifest",
+  "description": "Manifest file describing available color palettes for QwickApps React Framework",
+  "type": "object",
+  "required": ["version", "palettes"],
+  "properties": {
+    "version": {
+      "type": "string",
+      "description": "Version of the manifest/framework",
+      "pattern": "^\\d+\\.\\d+\\.\\d+$"
+    },
+    "palettes": {
+      "type": "array",
+      "description": "List of available color palettes",
+      "items": {
+        "type": "object",
+        "required": ["id", "name", "description", "version", "file", "primaryColor"],
+        "properties": {
+          "id": {
+            "type": "string",
+            "description": "Unique identifier for the palette (kebab-case)",
+            "pattern": "^[a-z][a-z0-9-]*$"
+          },
+          "name": {
+            "type": "string",
+            "description": "Human-readable name of the palette"
+          },
+          "description": {
+            "type": "string",
+            "description": "Brief description of the palette theme"
+          },
+          "author": {
+            "type": "string",
+            "description": "Author or organization that created the palette"
+          },
+          "license": {
+            "type": "string",
+            "description": "License under which the palette is distributed"
+          },
+          "version": {
+            "type": "string",
+            "description": "Version of the palette",
+            "pattern": "^\\d+\\.\\d+\\.\\d+$"
+          },
+          "file": {
+            "type": "string",
+            "description": "Filename of the palette CSS (unminified)",
+            "pattern": "^palette-[a-z][a-z0-9-]*\\.\\d+\\.\\d+\\.\\d+\\.css$"
+          },
+          "fileMinified": {
+            "type": "string",
+            "description": "Filename of the minified palette CSS",
+            "pattern": "^palette-[a-z][a-z0-9-]*\\.\\d+\\.\\d+\\.\\d+\\.min\\.css$"
+          },
+          "thumbnail": {
+            "type": "string",
+            "description": "Filename of the palette thumbnail image"
+          },
+          "primaryColor": {
+            "type": "string",
+            "description": "Primary color of the palette (hex format)",
+            "pattern": "^#[0-9a-fA-F]{6}$"
+          },
+          "inlined": {
+            "type": "boolean",
+            "description": "Whether this palette is inlined in the main CSS bundle",
+            "default": false
+          }
+        }
+      }
+    }
+  }
+}

package/src/schemas/ButtonSchema.ts

@@ -33,6 +33,17 @@ export class ButtonModel extends ViewSchema {
   @IsIn(['primary', 'secondary', 'outlined', 'text', 'contained'])
   variant?: 'primary' | 'secondary' | 'outlined' | 'text' | 'contained';
 
+  @Field()
+  @Editor({
+    field_type: FieldType.SELECT,
+    label: 'Button Color',
+    description: 'Color theme for the button (overrides variant color)'
+  })
+  @IsOptional()
+  @IsString()
+  @IsIn(['primary', 'secondary', 'error', 'warning', 'info', 'success'])
+  color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+
   @Field({ defaultValue: 'medium' })
   @Editor({
     field_type: FieldType.SELECT,
@@ -95,6 +106,28 @@ export class ButtonModel extends ViewSchema {
   @IsOptional()
   @IsBoolean()
   fullWidth?: boolean;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'Icon',
+    description: 'Icon name to display before button text (e.g., "home", "download", "settings")',
+    placeholder: 'Icon name...'
+  })
+  @IsOptional()
+  @IsString()
+  icon?: string;
+
+  @Field()
+  @Editor({
+    field_type: FieldType.TEXT,
+    label: 'End Icon',
+    description: 'Icon name to display after button text',
+    placeholder: 'Icon name...'
+  })
+  @IsOptional()
+  @IsString()
+  endIcon?: string;
 }
 
 export default ButtonModel;

package/src/schemas/CardListGridSchema.ts

@@ -4,7 +4,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { IsArray, IsOptional, IsNumber, IsIn, IsBoolean, IsObject, IsString } from 'class-validator';
+import { IsArray, IsOptional, IsNumber, IsIn, IsBoolean, IsObject } from 'class-validator';
 import 'reflect-metadata';
 import { Editor, Field, Schema, FieldType } from '@qwickapps/schema';
 import { ContainerSchema } from './ContainerSchema';
@@ -18,7 +18,7 @@ export class CardListGridModel extends ContainerSchema {
     description: 'Array of items to display in the grid'
   })
   @IsArray()
-  items?: any[];
+  items?: unknown[];
 
   @Field()
   @Editor({
@@ -96,7 +96,7 @@ export class CardListGridModel extends ContainerSchema {
   })
   @IsOptional()
   @IsObject()
-  itemProps?: Record<string, any>;
+  itemProps?: Record<string, unknown>;
 }
 
 

package/src/schemas/CodeSchema.ts

@@ -4,7 +4,6 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import type { ReactNode } from 'react';
 import { IsBoolean, IsOptional, IsString } from 'class-validator';
 import 'reflect-metadata';
 import { Editor, Field, Schema, FieldType } from '@qwickapps/schema';