@qwickapps/react-framework 1.4.9 → 1.5.1

package/dist/utils/reactUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reactUtils.d.ts","sourceRoot":"","sources":["../../src/utils/reactUtils.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,qCAAqC;AACrC,KAAK,YAAY,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvE;;;GAGG;AACH,eAAO,MAAM,eAAe,QAAO,YAAY,GAAG,SAOjD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,QAAO,QAqBlC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CA2BhE"}
+{"version":3,"file":"reactUtils.d.ts","sourceRoot":"","sources":["../../src/utils/reactUtils.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,gCAAgC;AAChC,KAAK,YAAY,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,eAAe,QAAO,YAAY,GAAG,SAUjD,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;AAEhF;;;;GAIG;AACH,eAAO,MAAM,eAAe,QAAO,gBAalC,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CA2BhE"}

package/dist/utils/spacing.d.ts

@@ -11,7 +11,7 @@ export type SpacingContext = 'padding' | 'margin' | 'gap';
 /**
  * Resolves a spacing value to MUI spacing units or CSS value
  */
-export declare function resolveSpacing(value: SpacingValue, context?: SpacingContext): number | string | undefined;
+export declare function resolveSpacing(value: SpacingValue): number | string | undefined;
 /**
  * Resolves spacing props with support for directional values
  */
@@ -30,5 +30,5 @@ export declare function resolveSpacingProps(props: {
     marginLeft?: SpacingValue;
     marginX?: SpacingValue;
     marginY?: SpacingValue;
-}): any;
+}): Record<string, string | number | undefined>;
 //# sourceMappingURL=spacing.d.ts.map

package/dist/utils/spacing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/utils/spacing.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;AAoB1D;;GAEG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,YAAY,EACnB,OAAO,GAAE,cAA0B,GAClC,MAAM,GAAG,MAAM,GAAG,SAAS,CA+C7B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,OAkDA"}
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/utils/spacing.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;AAoB1D;;GAEG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,YAAY,GAClB,MAAM,GAAG,MAAM,GAAG,SAAS,CA+C7B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,+CAkDA"}

package/dist/utils/themePerformanceMonitor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themePerformanceMonitor.d.ts","sourceRoot":"","sources":["../../src/utils/themePerformanceMonitor.js"],"names":[],"mappings":"AA2GO;;;;;;SAA8E;AAC9E,iDAA8E;AAC9E,mDAAwE;;AAL/E,+DAA8D;AAxG9D;;;;GAIG;AAEH;IAEI,oBAAsB;IACtB,mBAAuD;IAOzD,4BAUC;IAED,gDAkCC;IAED;;;;;;aAiBC;IAED,sBAaC;IAED,cAEC;CACF"}
+{"version":3,"file":"themePerformanceMonitor.d.ts","sourceRoot":"","sources":["../../src/utils/themePerformanceMonitor.js"],"names":[],"mappings":"AAmHO;;;;;;SAA8E;AAC9E,iDAA8E;AAC9E,mDAAwE;;AAL/E,+DAA8D;AAhH9D;;;;GAIG;AAEH;IAEI,oBAAsB;IACtB,mBAAuD;IAOzD,4BAeC;IAED,gDAqCC;IAED;;;;;;aAiBC;IAED,sBAaC;IAED,cAEC;CACF"}

package/dist/utils/themeUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeUtils.d.ts","sourceRoot":"","sources":["../../src/utils/themeUtils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGtE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3E;;GAEG;AACH,eAAO,MAAM,eAAe,QAAO,SAIlC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,SAAS,KAAG,IAM3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,QAAO,eAEjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,QAAO,SAA6B,KAAG,eAKvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,QAAO,IAWlC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,SAAS,KAAG,IAGtD,CAAC"}
+{"version":3,"file":"themeUtils.d.ts","sourceRoot":"","sources":["../../src/utils/themeUtils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGtE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3E;;GAEG;AACH,eAAO,MAAM,eAAe,QAAO,SAOlC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,OAAO,SAAS,KAAG,IAS3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,QAAO,eAKjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,QAAO,SAA6B,KAAG,eAKvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,QAAO,IAclC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,SAAS,KAAG,IAMtD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qwickapps/react-framework",
-  "version": "1.4.9",
+  "version": "1.5.1",
   "type": "module",
   "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
   "main": "dist/index.js",
@@ -37,18 +37,20 @@
     "QUICK_START_GUIDE.md"
   ],
   "scripts": {
-    "build": "rollup -c && npm run copy-palettes",
-    "copy-palettes": "cp src/palettes/*.css dist/palettes/",
-    "build:dev": "NODE_ENV=development rollup -c && npm run copy-palettes",
-    "build:prod": "NODE_ENV=production STRIP_LOGS=true rollup -c && npm run copy-palettes",
+    "build": "rollup -c && npm run build-palettes",
+    "build-palettes": "node scripts/build-palettes.cjs",
+    "build:dev": "NODE_ENV=development rollup -c && npm run build-palettes",
+    "build:prod": "NODE_ENV=production STRIP_LOGS=true rollup -c && npm run build-palettes",
     "dev": "rollup -c -w",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "clean": "rm -rf dist node_modules .rollup.cache storybook-static",
     "create-project": "node scripts/create-qwickapps-project.js",
-    "prepublishOnly": "npm run build",
+    "validate:clean-install": "./qa/clean-install/validate.sh",
+    "prepublishOnly": "npm run build && npm run validate:clean-install",
     "publish": "npm publish",
+    "publish:palettes": "../../products/qwickapps/anvil/publish-palettes.sh",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -69,7 +71,7 @@
   "author": "QwickApps",
   "license": "PolyForm-Shield-1.0.0",
   "dependencies": {
-    "@qwickapps/schema": "^1.3.1",
+    "@qwickapps/schema": "^1.3.2",
     "marked": "^4.3.0",
     "md5": "^2.3.0",
     "sanitize-html": "^2.17.0"
@@ -112,8 +114,8 @@
     "@types/md5": "^2.3.5",
     "@types/mustache": "^4.2.5",
     "@types/node": "^24.1.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/sanitize-html": "^2.16.0",
     "babel-jest": "^29.0.0",
@@ -141,6 +143,15 @@
     "moduleNameMapper": {
       "\\.(css|less|scss|sass)$": "identity-obj-proxy"
     },
+    "globals": {
+      "import.meta": {
+        "env": {
+          "DEV": false,
+          "PROD": true,
+          "MODE": "test"
+        }
+      }
+    },
     "transform": {
       "^.+\\.(js|jsx)$": "babel-jest",
       "^.+\\.(ts|tsx)$": "ts-jest"

package/scripts/build-palettes.cjs

@@ -0,0 +1,120 @@
+#!/usr/bin/env node
+
+/**
+ * Build Palettes Script
+ * - Adds version numbers to filenames
+ * - Generates minified versions
+ * - Updates manifest.json with new filenames
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const SRC_DIR = path.join(__dirname, '../src/palettes');
+const DIST_DIR = path.join(__dirname, '../dist/palettes');
+const PACKAGE_JSON = path.join(__dirname, '../package.json');
+
+// Read version from package.json
+const packageJson = JSON.parse(fs.readFileSync(PACKAGE_JSON, 'utf-8'));
+const VERSION = packageJson.version;
+
+console.log(`Building palettes v${VERSION}...`);
+
+// Ensure dist directory exists
+if (!fs.existsSync(DIST_DIR)) {
+  fs.mkdirSync(DIST_DIR, { recursive: true });
+}
+
+// Simple CSS minifier
+function minifyCSS(css) {
+  return css
+    // Remove comments
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    // Remove whitespace around selectors and braces
+    .replace(/\s*([{}:;,])\s*/g, '$1')
+    // Remove trailing semicolons
+    .replace(/;}/g, '}')
+    // Remove empty rules
+    .replace(/[^{}]+\{\}/g, '')
+    // Trim
+    .trim();
+}
+
+// Convert PascalCase to kebab-case (PaletteAutumn -> palette-autumn)
+function toKebabCase(str) {
+  return str
+    .replace(/^Palette/, '')  // Remove 'Palette' prefix
+    .replace(/([a-z])([A-Z])/g, '$1-$2')  // Add hyphen before capitals
+    .toLowerCase();
+}
+
+// Process palette files
+const files = fs.readdirSync(SRC_DIR).filter(f => f.endsWith('.css') && f.startsWith('Palette'));
+
+files.forEach(file => {
+  const baseName = file.replace('.css', '');
+  const paletteId = toKebabCase(baseName);  // e.g., 'autumn'
+  const content = fs.readFileSync(path.join(SRC_DIR, file), 'utf-8');
+
+  // Generate filenames using kebab-case pattern
+  const versionedName = `palette-${paletteId}.${VERSION}.css`;
+  const versionedMinName = `palette-${paletteId}.${VERSION}.min.css`;
+  const latestName = `palette-${paletteId}.latest.css`;
+  const latestMinName = `palette-${paletteId}.latest.min.css`;
+
+  // Write versioned files
+  fs.writeFileSync(path.join(DIST_DIR, versionedName), content);
+  console.log(`✓ ${versionedName}`);
+
+  const minified = minifyCSS(content);
+  fs.writeFileSync(path.join(DIST_DIR, versionedMinName), minified);
+  console.log(`✓ ${versionedMinName}`);
+
+  // Write latest aliases (same content as versioned)
+  fs.writeFileSync(path.join(DIST_DIR, latestName), content);
+  console.log(`✓ ${latestName}`);
+
+  fs.writeFileSync(path.join(DIST_DIR, latestMinName), minified);
+  console.log(`✓ ${latestMinName}`);
+});
+
+// Copy and update manifest.json
+const manifestPath = path.join(SRC_DIR, 'manifest.json');
+const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+
+// Update version
+manifest.version = VERSION;
+
+// Update file references with kebab-case versioned names
+manifest.palettes = manifest.palettes.map(palette => {
+  const paletteId = palette.id;  // e.g., 'autumn', 'default'
+  return {
+    ...palette,
+    version: VERSION,
+    file: `palette-${paletteId}.${VERSION}.css`,
+    fileMinified: `palette-${paletteId}.${VERSION}.min.css`,
+    fileLatest: `palette-${paletteId}.latest.css`,
+    fileLatestMinified: `palette-${paletteId}.latest.min.css`
+  };
+});
+
+// Write updated manifest
+fs.writeFileSync(
+  path.join(DIST_DIR, 'manifest.json'),
+  JSON.stringify(manifest, null, 2)
+);
+console.log(`✓ manifest.json (updated with kebab-case versioned filenames)`);
+
+// Copy index.css if it exists
+const indexCss = path.join(SRC_DIR, 'index.css');
+if (fs.existsSync(indexCss)) {
+  fs.copyFileSync(indexCss, path.join(DIST_DIR, 'index.css'));
+  console.log(`✓ index.css`);
+}
+
+console.log('\n✅ Palette build complete!');
+console.log(`   ${files.length} palettes × 4 versions each:`);
+console.log(`   - palette-{id}.${VERSION}.css (versioned)`);
+console.log(`   - palette-{id}.${VERSION}.min.css (versioned minified)`);
+console.log(`   - palette-{id}.latest.css (latest alias)`);
+console.log(`   - palette-{id}.latest.min.css (latest minified alias)`);

package/src/__tests__/components/Article.test.tsx

@@ -81,7 +81,7 @@ const sampleCmsData = {
 };
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (

package/src/__tests__/components/Breadcrumbs.test.tsx

@@ -191,8 +191,8 @@ describe('Breadcrumbs', () => {
   it('handles default link behavior when no onNavigate is provided', () => {
     // Create a mock for window.location.href
     const originalLocation = window.location;
-    delete (window as any).location;
-    window.location = { ...originalLocation, href: '' } as any;
+    delete (window as Window & typeof globalThis).location;
+    window.location = { ...originalLocation, href: '' } as Location;
 
     const itemsWithHref: BreadcrumbItem[] = [
       { label: 'Home', href: '/' },

package/src/__tests__/components/Button.test.tsx

@@ -74,7 +74,7 @@ const sampleCmsData = {
 };
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -573,7 +573,7 @@ describe('Button', () => {
     it.skip('preserves component marking for QwickApp framework', () => {
       // The component should be marked as a QwickApp component
       // This is important for framework identification - test skipped due to test environment limitations
-      const buttonComponent = Button as any;
+      const buttonComponent = Button as unknown as { QWICKAPP_COMPONENT?: boolean };
       expect(buttonComponent.QWICKAPP_COMPONENT).toBeTruthy();
     });
   });
@@ -665,7 +665,7 @@ describe('Button', () => {
     it('handles invalid variant gracefully', () => {
       render(
         <TestWrapper>
-          <Button label="Invalid Variant" variant={'invalid' as any} />
+          <Button label="Invalid Variant" variant={'invalid' as 'primary' | 'secondary' | 'outlined' | 'text' | 'contained'} />
         </TestWrapper>
       );
 

package/src/__tests__/components/CardListGrid.test.tsx

@@ -84,7 +84,7 @@ const sampleCmsData = {
 };
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -104,9 +104,9 @@ const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> =
 describe('CardListGrid', () => {
   describe('Traditional Props Usage', () => {
     it('renders with custom render function', () => {
-      const customRenderItem = (item: any, index: number) => (
+      const customRenderItem = (item: Record<string, unknown>, index: number) => (
         <div key={index} data-testid={`custom-item-${index}`}>
-          {item.name}
+          {item.name as string}
         </div>
       );
 
@@ -188,11 +188,11 @@ describe('CardListGrid', () => {
     });
 
     it('handles empty items array gracefully', () => {
-      const customRenderItem = (item: any, index: number) => (
+      const customRenderItem = (item: Record<string, unknown>, index: number) => (
         <div key={index}>Empty</div>
       );
 
-      const { container } = render(
+      render(
         <TestWrapper>
           <CardListGrid
             items={[]}

package/src/__tests__/components/ChoiceInputField.test.tsx

@@ -100,7 +100,7 @@ const sampleCmsData = {
 };
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -641,7 +641,7 @@ describe('ChoiceInputField', () => {
     it.skip('preserves component marking for QwickApp framework', () => {
       // The component should be marked as a QwickApp component
       // This is important for framework identification - test skipped due to test environment limitations
-      const choiceInputFieldComponent = ChoiceInputField as any;
+      const choiceInputFieldComponent = ChoiceInputField as unknown as { QWICKAPP_COMPONENT?: boolean };
       expect(choiceInputFieldComponent.QWICKAPP_COMPONENT).toBeTruthy();
     });
   });

package/src/__tests__/components/Code.test.tsx

@@ -80,7 +80,7 @@ const sampleCmsData = {
 };
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -508,7 +508,7 @@ describe('Code', () => {
     it.skip('preserves component marking for QwickApp framework', () => {
       // The component should be marked as a QwickApp component
       // This is important for framework identification - test skipped due to test environment limitations
-      const codeComponent = Code as any;
+      const codeComponent = Code as unknown as { QWICKAPP_COMPONENT?: boolean };
       expect(codeComponent.QWICKAPP_COMPONENT).toBeTruthy();
     });
   });

package/src/__tests__/components/Content.integration.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render, waitFor, screen } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import Content from '../../components/blocks/Content';
 import { DataProvider } from '../../contexts/DataContext';
 import { JsonDataProvider } from '@qwickapps/schema';

package/src/__tests__/components/Content.test.tsx

@@ -52,7 +52,7 @@ const sampleCmsData = {
 };
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -121,9 +121,9 @@ describe.skip('Content', () => {
       const variants = ['default', 'elevated', 'outlined', 'filled'] as const;
       
       variants.forEach(variant => {
-        const { container, unmount } = render(
+        const { unmount } = render(
           <TestWrapper>
-            <Content 
+            <Content
               title={`${variant} variant`}
               variant={variant}
             />
@@ -470,9 +470,9 @@ describe.skip('Content', () => {
     });
 
     it('handles custom CSS classes and styles', () => {
-      const { container } = render(
+      render(
         <TestWrapper>
-          <Content 
+          <Content
             title="Custom Styled"
             className="custom-content"
             sx={{ border: '1px solid red' }}

package/src/__tests__/components/CoverImageHeader.test.tsx

@@ -77,7 +77,7 @@ const mockActions = [
 ];
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => {
@@ -430,9 +430,9 @@ describe('CoverImageHeader', () => {
     });
 
     it('handles custom CSS classes and styles', () => {
-      const { container } = render(
+      render(
         <TestWrapper>
-          <CoverImageHeader 
+          <CoverImageHeader
             title="Custom Styled"
             className="custom-header"
             sx={{ border: '1px solid red' }}

package/src/__tests__/components/FeatureCard.integration.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render, waitFor, screen } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import FeatureCard from '../../blocks/FeatureCard';
 import { DataProvider } from '../../../contexts/DataContext';
 import { JsonDataProvider } from '@qwickapps/schema';

package/src/__tests__/components/FeatureGrid.integration.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render, waitFor, screen } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import FeatureGrid from '../../blocks/FeatureGrid';
 import { DataProvider } from '../../../contexts/DataContext';
 import { JsonDataProvider } from '@qwickapps/schema';

package/src/__tests__/components/FeatureGrid.test.tsx

@@ -99,7 +99,7 @@ const sampleFeatures: FeatureItem[] = [
 ];
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -206,9 +206,9 @@ describe.skip('FeatureGrid', () => {
     });
 
     it('supports grid props', () => {
-      const { container } = render(
+      render(
         <TestWrapper>
-          <FeatureGrid 
+          <FeatureGrid
             features={sampleFeatures}
             span={12}
             xs={12}

package/src/__tests__/components/Footer.test.tsx

@@ -105,7 +105,7 @@ const sampleItems: FooterItem[] = [
 ];
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -314,9 +314,9 @@ describe.skip('Footer', () => {
     });
 
     it('renders with custom CSS classes and styles', () => {
-      const { container } = render(
+      render(
         <TestWrapper>
-          <Footer 
+          <Footer
             sections={sampleSections}
             className="custom-footer"
             sx={{ backgroundColor: 'red' }}

package/src/__tests__/components/FormBlock.test.tsx

@@ -97,7 +97,7 @@ const MockFooter: React.FC = () => (
 );
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any; appName?: string }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown; appName?: string }> = ({ 
   children, 
   dataProvider,
   appName = 'Test App'
@@ -652,7 +652,7 @@ describe('FormBlock', () => {
     it.skip('preserves component marking for QwickApp framework', () => {
       // The component should be marked as a QwickApp component
       // This is important for framework identification - test skipped due to test environment limitations
-      const formBlockComponent = FormBlock as any;
+      const formBlockComponent = FormBlock as unknown as { QWICKAPP_COMPONENT?: boolean };
       expect(formBlockComponent.QWICKAPP_COMPONENT).toBeTruthy();
     });
   });

package/src/__tests__/components/HeroBlock.integration.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render, waitFor, screen } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import HeroBlock from '../../blocks/HeroBlock';
 import { DataProvider } from '../../../contexts/DataContext';
 import { JsonDataProvider } from '@qwickapps/schema';

package/src/__tests__/components/HeroBlock.test.tsx

@@ -58,7 +58,7 @@ const sampleActions: ButtonProps[] = [
 ];
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -242,9 +242,9 @@ describe('HeroBlock', () => {
     });
 
     it('renders with custom CSS classes and styles', () => {
-      const { container } = render(
+      render(
         <TestWrapper>
-          <HeroBlock 
+          <HeroBlock
             title="Custom Hero"
             className="custom-hero"
             sx={{ backgroundColor: 'red' }}
@@ -680,7 +680,7 @@ describe('HeroBlock', () => {
       
       expect(parsedData.data).toHaveProperty('title', 'Minimal Hero');
       // undefined properties should be either excluded or set to undefined
-      expect(parsedData.data.subtitle === undefined || !parsedData.data.hasOwnProperty('subtitle')).toBe(true);
+      expect(parsedData.data.subtitle === undefined || !Object.prototype.hasOwnProperty.call(parsedData.data, 'subtitle')).toBe(true);
       
       const deserializedComponent = ComponentTransformer.deserialize(serializedData);
       expect(React.isValidElement(deserializedComponent)).toBe(true);

package/src/__tests__/components/HtmlInputField.test.tsx

@@ -81,7 +81,7 @@ const sampleCmsData = {
 };
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -316,7 +316,7 @@ describe.skip('HtmlInputField', () => {
         selectionEnd: 5,
         setSelectionRange: jest.fn(),
         focus: jest.fn()
-      } as any;
+      } as unknown as HTMLTextAreaElement;
       
       jest.spyOn(document, 'getElementById').mockReturnValue(mockTextarea);
       
@@ -345,7 +345,7 @@ describe.skip('HtmlInputField', () => {
         selectionEnd: 5,
         setSelectionRange: jest.fn(),
         focus: jest.fn()
-      } as any;
+      } as unknown as HTMLTextAreaElement;
       
       jest.spyOn(document, 'getElementById').mockReturnValue(mockTextarea);
       
@@ -475,8 +475,8 @@ describe.skip('HtmlInputField', () => {
         selectionEnd: 4,
         setSelectionRange: jest.fn(),
         focus: jest.fn()
-      } as any;
-      
+      } as unknown as HTMLTextAreaElement;
+
       jest.spyOn(document, 'getElementById').mockReturnValue(mockTextarea);
       
       const handleChange = jest.fn();
@@ -644,7 +644,7 @@ describe.skip('HtmlInputField', () => {
     it.skip('preserves component marking for QwickApp framework', () => {
       // The component should be marked as a QwickApp component
       // This is important for framework identification - test skipped due to test environment limitations
-      const htmlInputFieldComponent = HtmlInputField as any;
+      const htmlInputFieldComponent = HtmlInputField as unknown as { QWICKAPP_COMPONENT?: boolean };
       expect(htmlInputFieldComponent.QWICKAPP_COMPONENT).toBeTruthy();
     });
   });
@@ -707,8 +707,8 @@ describe.skip('HtmlInputField', () => {
         selectionEnd: 4,
         setSelectionRange: jest.fn(),
         focus: jest.fn()
-      } as any;
-      
+      } as unknown as HTMLTextAreaElement;
+
       jest.spyOn(document, 'getElementById').mockReturnValue(mockTextarea);
       
       const handleChange = jest.fn();

package/src/__tests__/components/PageBannerHeader.test.tsx

@@ -79,7 +79,7 @@ const mockActions = [
 ];
 
 // Wrapper component for tests that need providers
-const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: any }> = ({ 
+const TestWrapper: React.FC<{ children: React.ReactNode; dataProvider?: unknown }> = ({ 
   children, 
   dataProvider 
 }) => (
@@ -247,9 +247,9 @@ describe('PageBannerHeader', () => {
     });
 
     it('renders with custom height', () => {
-      const { container } = render(
+      render(
         <TestWrapper>
-          <PageBannerHeader 
+          <PageBannerHeader
             title="Custom Height"
             coverImage="/test-cover.jpg"
             height={400}
@@ -505,8 +505,8 @@ describe('PageBannerHeader', () => {
       process.env.NODE_ENV = 'production';
       
       const emptyDataProvider = new JsonDataProvider({ data: {} });
-      
-      const { container } = render(
+
+      render(
         <TestWrapper dataProvider={emptyDataProvider}>
           <PageBannerHeader dataSource="pageBannerHeaders.nonexistentData" />
         </TestWrapper>
@@ -588,9 +588,9 @@ describe('PageBannerHeader', () => {
     });
 
     it('handles custom CSS classes and styles', () => {
-      const { container } = render(
+      render(
         <TestWrapper>
-          <PageBannerHeader 
+          <PageBannerHeader
             title="Custom Styled"
             className="custom-header"
             sx={{ border: '1px solid red' }}