@qwickapps/react-framework 1.4.9 → 1.5.0

package/src/schemas/transformers/registry.ts

@@ -23,7 +23,6 @@ import { SwitchInputField } from '../../components/input/SwitchInputField';
 import { TextInputField } from '../../components/input/TextInputField';
 import { GridCell } from '../../components/layout/GridCell';
 import { GridLayout } from '../../components/layout/GridLayout';
-import { ComponentTransformer } from './ComponentTransformer';
 
 /**
  * Register all serializable components with the ComponentTransformer
@@ -32,41 +31,46 @@ import { ComponentTransformer } from './ComponentTransformer';
  * Phase 0: Foundation in place - ready for component migration
  * Phase 1+: Components will be migrated to createSerializableView factory
  */
+import { ComponentTransformer } from './ComponentTransformer';
+
 export function registerSerializableComponents(): void {
+  // Type for serializable components
+  type SerializableComponent = { tagName: string; version: string; fromJson: (data: unknown) => React.ReactElement };
+
   // Register Container component - Base layout component with child serialization support
-  ComponentTransformer.registerComponent(Container as any);
+  ComponentTransformer.registerComponent(Container as unknown as SerializableComponent);
 
   // Register Code component - First production component with serialization support
-  ComponentTransformer.registerComponent(Code as any);
-  
+  ComponentTransformer.registerComponent(Code as unknown as SerializableComponent);
+
   // Register Section component - Layout container component with child serialization support
-  ComponentTransformer.registerComponent(Section as any);
-  
+  ComponentTransformer.registerComponent(Section as unknown as SerializableComponent);
+
   // Register Button component - Interactive component with action serialization support
-  ComponentTransformer.registerComponent(Button as any);
-  
+  ComponentTransformer.registerComponent(Button as unknown as SerializableComponent);
+
   // Register Image component - Display component with comprehensive image handling and serialization support
-  ComponentTransformer.registerComponent(Image as any);
-  
+  ComponentTransformer.registerComponent(Image as unknown as SerializableComponent);
+
   // Register Text component - Typography component with comprehensive text styling and serialization support
-  ComponentTransformer.registerComponent(Text as any);
-  
+  ComponentTransformer.registerComponent(Text as unknown as SerializableComponent);
+
   // Register HeroBlock component - Full-width hero section with nested component serialization support
-  ComponentTransformer.registerComponent(HeroBlock as any);
-  
+  ComponentTransformer.registerComponent(HeroBlock as unknown as SerializableComponent);
+
   // Register GridLayout component - Flexible grid layout with nested component serialization support
-  ComponentTransformer.registerComponent(GridLayout as any);
-  
+  ComponentTransformer.registerComponent(GridLayout as unknown as SerializableComponent);
+
   // Register GridCell component - Grid cell wrapper with nested component serialization support
-  ComponentTransformer.registerComponent(GridCell as any);
-  
+  ComponentTransformer.registerComponent(GridCell as unknown as SerializableComponent);
+
   // Register Form Components - Complete form field components with serialization support
-  ComponentTransformer.registerComponent(TextInputField as any);
-  ComponentTransformer.registerComponent(SelectInputField as any);
-  ComponentTransformer.registerComponent(HtmlInputField as any);
-  ComponentTransformer.registerComponent(ChoiceInputField as any);
-  ComponentTransformer.registerComponent(SwitchInputField as any);
-  ComponentTransformer.registerComponent(FormBlock as any);
+  ComponentTransformer.registerComponent(TextInputField as unknown as SerializableComponent);
+  ComponentTransformer.registerComponent(SelectInputField as unknown as SerializableComponent);
+  ComponentTransformer.registerComponent(HtmlInputField as unknown as SerializableComponent);
+  ComponentTransformer.registerComponent(ChoiceInputField as unknown as SerializableComponent);
+  ComponentTransformer.registerComponent(SwitchInputField as unknown as SerializableComponent);
+  ComponentTransformer.registerComponent(FormBlock as unknown as SerializableComponent);
   
   // Future components will be registered here as they implement Serializable
   // etc.

package/src/schemas/types/Serializable.ts

@@ -19,7 +19,7 @@ export interface Serializable {
    * Convert component instance to JSON data
    * @returns Serializable data structure
    */
-  toJson(): any;
+  toJson(): unknown;
 }
 
 /**
@@ -45,7 +45,7 @@ export interface SerializableConstructor {
    * @param jsonData - Serialized component data
    * @returns React element representing the component
    */
-  fromJson(jsonData: any): ReactElement;
+  fromJson(jsonData: unknown): ReactElement;
   
-  new (...args: any[]): Serializable;
+  new (...args: unknown[]): Serializable;
 }

package/src/setupTests.js

@@ -1,6 +1,15 @@
 // Jest setup for QwickApps Theme System tests
 import '@testing-library/jest-dom';
 
+// Mock paletteLoader to avoid import.meta.env issues in Jest
+jest.mock('./utils/paletteLoader', () => ({
+  loadPalette: jest.fn().mockResolvedValue(undefined),
+  loadPaletteSync: jest.fn(),
+  isPaletteLoaded: jest.fn().mockReturnValue(true),
+  getLoadedPalettes: jest.fn().mockReturnValue([]),
+  preloadPalettes: jest.fn().mockResolvedValue(undefined),
+}));
+
 // Mock CSS imports for components
 jest.mock('./components/QwickApp.css', () => ({}));
 jest.mock('./components/Logo.css', () => ({}));

package/src/stories/AccessibilityProvider.stories.tsx

@@ -13,7 +13,6 @@ const AccessibilityDemo = () => {
  setHighContrast,
  setReducedMotion,
  setLargeText,
- announce,
  announcePolite,
  announceAssertive,
  runAudit,

package/src/stories/CardListGrid.stories.tsx

@@ -197,7 +197,7 @@ export const FeatureGrid: Story = {
 
 export const CustomRenderFunction: Story = {
  render: () => {
- const customRenderItem = (item: any, index: number) => (
+ const customRenderItem = (item: { id?: string; title?: string; description?: string }, index: number) => (
  <Box 
  key={item.id || index}
  sx={{ 

package/src/stories/Code.stories.tsx

@@ -4,12 +4,11 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Alert, Box, Divider, Paper, Typography } from '@mui/material';
+import { Box, Divider, Typography } from '@mui/material';
 import { JsonDataProvider } from '@qwickapps/schema';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Code } from '../components/blocks';
 import QwickApp from '../components/QwickApp';
-import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
 import { makeSerializationStory } from './_templates/SerializationTemplate';
 
 // Sample code content for different languages
@@ -661,7 +660,7 @@ export const SerializationDemo: Story = {
       wrapLines={false}
       codeBackground="linear-gradient(135deg, #667eea20, #764ba220)"
       sx={{ mb: 2, border: "1px solid #ddd" }}
-      onClick={(event) => { console.log("Code component clicked!"); }}
+      onClick={() => { console.log("Code component clicked!"); }}
       role="region"
       aria-label="TypeScript code demonstration"
       data-testid="serializable-code-block"

package/src/stories/CollapsibleLayout.stories.tsx

@@ -431,12 +431,11 @@ export const InitiallyCollapsed: Story = {
  },
 };
 
-export const ControlledState: Story = {
- render: () => {
- const [isCollapsed, setIsCollapsed] = useState(false);
- 
- return (
- <QwickApp appId="collapsible-controlled" appName='Controlled State'>
+const ControlledStateComponent = () => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <QwickApp appId="collapsible-controlled" appName='Controlled State'>
  <Stack spacing={2}>
  <Box>
  <FormControlLabel
@@ -463,19 +462,22 @@ export const ControlledState: Story = {
  <Alert severity="info">
  This CollapsibleLayout's state is controlled by the switch above. 
  You can also click the header to toggle, but the switch will update accordingly.
- </Alert>
- </CollapsibleLayout>
- </Stack>
- </QwickApp>
- );
- },
- parameters: {
- docs: {
- description: {
- story: 'CollapsibleLayout with controlled state managed by external component (switch).',
- },
- },
- },
+      </Alert>
+      </CollapsibleLayout>
+    </Stack>
+    </QwickApp>
+  );
+};
+
+export const ControlledState: Story = {
+  render: () => <ControlledStateComponent />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'CollapsibleLayout with controlled state managed by external component (switch).',
+      },
+    },
+  },
 };
 
 export const WithPersistence: Story = {
@@ -833,12 +835,11 @@ export const CustomIcons: Story = {
  },
 };
 
-export const DisabledState: Story = {
- render: () => {
- const [disabled, setDisabled] = useState(false);
- 
- return (
- <QwickApp appId="collapsible-disabled" appName='Disabled State'>
+const DisabledStateComponent = () => {
+  const [disabled, setDisabled] = useState(false);
+
+  return (
+    <QwickApp appId="collapsible-disabled" appName='Disabled State'>
  <Stack spacing={2}>
  <Box>
  <FormControlLabel
@@ -870,18 +871,21 @@ export const DisabledState: Story = {
  : "This content can be toggled normally. Use the switch above to simulate a disabled state."
  }
  </Typography>
- </CollapsibleLayout>
- </Stack>
- </QwickApp>
- );
- },
- parameters: {
- docs: {
- description: {
- story: 'Demonstrating how to create a disabled-like state by conditionally removing event handlers.',
- },
- },
- },
+      </CollapsibleLayout>
+    </Stack>
+    </QwickApp>
+  );
+};
+
+export const DisabledState: Story = {
+  render: () => <DisabledStateComponent />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrating how to create a disabled-like state by conditionally removing event handlers.',
+      },
+    },
+  },
 };
 
 // ============================================

package/src/stories/Container.stories.tsx

@@ -8,7 +8,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Alert, Box, Paper, Typography } from '@mui/material';
+import { Alert, Box, Typography } from '@mui/material';
 import { JsonDataProvider } from '@qwickapps/schema';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
@@ -17,7 +17,6 @@ import { makeSerializationStory } from './_templates/SerializationTemplate';
 import { Code, Text } from '../components/blocks';
 import { Button } from '../components/buttons/Button';
 import QwickApp from '../components/QwickApp';
-import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
 import {registerSerializableComponents} from '../schemas/transformers/registry';
 
 console.log('Registering serializable components for stories...', registerSerializableComponents);

package/src/stories/DataBinding.advanced.stories.tsx

@@ -132,9 +132,8 @@ All HTML content is automatically sanitized:
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// Multi-language Support
-export const MultiLanguageContent: Story = {
- render: () => {
+// Multi-language Support Component
+const MultiLanguageComponent = () => {
  const [language, setLanguage] = useState<'en' | 'es'>('en');
 
  return (
@@ -175,7 +174,11 @@ export const MultiLanguageContent: Story = {
 ]`}</Code>
  </Section>
  );
- },
+};
+MultiLanguageComponent.displayName = 'MultiLanguageComponent';
+
+export const MultiLanguageContent: Story = {
+ render: () => <MultiLanguageComponent />,
  parameters: {
  docs: {
  description: {
@@ -185,9 +188,8 @@ export const MultiLanguageContent: Story = {
  }
 };
 
-// A/B Testing
-export const ABTestingVariants: Story = {
- render: () => {
+// A/B Testing Component
+const ABTestingComponent = () => {
  const [variant, setVariant] = useState<'a' | 'b'>('a');
 
  return (
@@ -207,7 +209,7 @@ export const ABTestingVariants: Story = {
  Variant B (Join Community)
  </Button>
  </GridLayout>
- 
+
  <Card variant="outlined" style={{ padding: '1.5rem', backgroundColor: '#e3f2fd' }}>
  <SafeSpan dataSource={`cta.variant-${variant}`} />
  </Card>
@@ -231,7 +233,11 @@ return (
 ]`}</Code>
  </Section>
  );
- },
+};
+ABTestingComponent.displayName = 'ABTestingComponent';
+
+export const ABTestingVariants: Story = {
+ render: () => <ABTestingComponent />,
  parameters: {
  docs: {
  description: {

package/src/stories/DataProvider.stories.tsx

@@ -365,7 +365,7 @@ export const BasicUsage: Story = {
 };
 
 // Enhanced ProviderDemo component using MUI components
-const ProviderDemo = ({ provider, title }: { provider: any; title: string }) => {
+const ProviderDemo = ({ provider, title }: { provider: JsonDataProvider | CachedDataProvider; title: string }) => {
  const [stats, setStats] = useState(() => {
  if ('getCacheStats' in provider && typeof provider.getCacheStats === 'function') {
  return provider.getCacheStats();
@@ -848,8 +848,8 @@ export const ErrorHandling: Story = {
 /**
  * External JSON file loading (simulated with fetch mock)
  */
-export const ExternalJSON: Story = {
- render: () => {
+// External JSON Component
+const ExternalJSONComponent = () => {
  // Mock fetch for this story
  const originalFetch = global.fetch;
  global.fetch = ((url: string) => {
@@ -876,7 +876,7 @@ export const ExternalJSON: Story = {
  return () => {
  global.fetch = originalFetch;
  };
- }, []);
+ }, [originalFetch]);
 
  return (
  <DataProvider dataSource={{ dataProvider: provider }}>
@@ -899,14 +899,17 @@ export const ExternalJSON: Story = {
  </div>
  </DataProvider>
  );
- }
+};
+ExternalJSONComponent.displayName = 'ExternalJSONComponent';
+
+export const ExternalJSON: Story = {
+ render: () => <ExternalJSONComponent />
 };
 
 /**
- * Performance demonstration with caching
+ * Performance demonstration component
  */
-export const PerformanceDemo: Story = {
- render: () => {
+const PerformanceDemoComponent = () => {
  const [renderCount, setRenderCount] = useState(1);
  const [cacheStats, setCacheStats] = useState<{ totalEntries: number; maxSize: number; expiredEntries: number }>({ totalEntries: 0, maxSize: 100, expiredEntries: 0 });
  const [forceRefresh, setForceRefresh] = useState(0);
@@ -925,7 +928,7 @@ export const PerformanceDemo: Story = {
  }, []);
 
  // Update cache stats when requested
- const updateCacheStats = () => {
+ const updateCacheStats = React.useCallback(() => {
  const stats = provider.getCacheStats();
  // Map stats to expected shape for cacheStats state
  setCacheStats({
@@ -934,7 +937,7 @@ export const PerformanceDemo: Story = {
  expiredEntries: stats.expiredEntries ?? stats.expiredEntries ?? 0
  });
  console.log('[Performance Demo] Cache stats updated:', stats);
- };
+ }, [provider]);
 
  // Initialize cache stats on mount
  React.useEffect(() => {
@@ -942,12 +945,13 @@ export const PerformanceDemo: Story = {
  setTimeout(() => {
  updateCacheStats();
  }, 100);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
 
  // Update cache stats when content changes
  React.useEffect(() => {
  updateCacheStats();
- }, [forceRefresh]);
+ }, [forceRefresh, updateCacheStats]);
 
  const triggerRender = (action: string) => {
  setRenderCount(prev => prev + 1);
@@ -1131,7 +1135,14 @@ export const PerformanceDemo: Story = {
  </div>
  </DataProvider>
  );
- }
+};
+PerformanceDemoComponent.displayName = 'PerformanceDemoComponent';
+
+/**
+ * Performance demonstration with caching
+ */
+export const PerformanceDemo: Story = {
+ render: () => <PerformanceDemoComponent />
 };
 
 /**
@@ -1264,10 +1275,9 @@ export const CachingBehavior: Story = {
 };
 
 /**
- * Interactive configuration playground with real-time settings
+ * Configuration playground component
  */
-export const ConfigurationPlayground: Story = {
- render: () => {
+const ConfigurationPlaygroundComponent = () => {
  const [config, setConfig] = useState({
  cacheTimeout: 5000,
  maxCacheSize: 10,
@@ -1357,5 +1367,12 @@ export const ConfigurationPlayground: Story = {
  </GridLayout>
  </Box>
  );
- }
+};
+ConfigurationPlaygroundComponent.displayName = 'ConfigurationPlaygroundComponent';
+
+/**
+ * Interactive configuration playground with real-time settings
+ */
+export const ConfigurationPlayground: Story = {
+ render: () => <ConfigurationPlaygroundComponent />
 };

package/src/stories/ErrorBoundary.stories.tsx

@@ -122,33 +122,35 @@ export const HigherOrderComponent: Story = {
 };
 
 // Interactive story for testing retry functionality
+const InteractiveComponent = () => {
+  const [shouldThrow, setShouldThrow] = React.useState(false);
+
+  return (
+    <div style={{ padding: '2rem' }}>
+      <button
+        onClick={() => setShouldThrow(!shouldThrow)}
+        style={{
+          marginBottom: '1rem',
+          padding: '0.5rem 1rem',
+          background: shouldThrow ? '#ff4444' : '#44aa44',
+          color: 'white',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer'
+        }}
+      >
+        {shouldThrow ? 'Fix Component' : 'Break Component'}
+      </button>
+
+      <ErrorBoundary>
+        <ThrowError shouldThrow={shouldThrow} />
+      </ErrorBoundary>
+    </div>
+  );
+};
+
 export const Interactive: Story = {
-  render: () => {
-    const [shouldThrow, setShouldThrow] = React.useState(false);
-    
-    return (
-      <div style={{ padding: '2rem' }}>
-        <button 
-          onClick={() => setShouldThrow(!shouldThrow)}
-          style={{ 
-            marginBottom: '1rem', 
-            padding: '0.5rem 1rem',
-            background: shouldThrow ? '#ff4444' : '#44aa44',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer'
-          }}
-        >
-          {shouldThrow ? 'Fix Component' : 'Break Component'}
-        </button>
-        
-        <ErrorBoundary>
-          <ThrowError shouldThrow={shouldThrow} />
-        </ErrorBoundary>
-      </div>
-    );
-  },
+  render: () => <InteractiveComponent />,
   parameters: {
     docs: {
       description: {

package/src/stories/FeatureGrid.stories.tsx

@@ -10,7 +10,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import QwickApp from '../components/QwickApp';
 import { Code } from '../components/blocks';
 import FeatureGrid from '../components/blocks/FeatureGrid';
-import { DataProvider } from '../contexts/DataContext';
 
 // Sample CMS data for data binding stories
 const sampleCmsData = {

package/src/stories/FormBlock.stories.tsx

@@ -154,14 +154,14 @@ export const LoginForm: Story = {
  type="email"
  placeholder="your.email@example.com"
  required={true}
- onChange={(value) => console.log('Email:', value)}
+ onChange={(_value) => console.log('Email:', _value)}
  />
  <TextInputField
  label="Password"
  type="password"
  placeholder="Enter your password"
  required={true}
- onChange={(value) => console.log('Password:', '***')}
+ onChange={() => console.log('Password:', '***')}
  />
  <Button
  label="Sign In"
@@ -219,7 +219,7 @@ export const RegistrationForm: Story = {
  placeholder="john.doe@example.com"
  required={true}
  helperText="We'll never share your email address"
- onChange={(value) => console.log('Email:', value)}
+ onChange={(_value) => console.log('Email:', _value)}
  />
  <TextInputField
  label="Password"
@@ -227,7 +227,7 @@ export const RegistrationForm: Story = {
  placeholder="Create a strong password"
  required={true}
  helperText="Minimum 8 characters with mixed case and numbers"
- onChange={(value) => console.log('Password:', '***')}
+ onChange={() => console.log('Password:', '***')}
  />
  <SelectInputField
  label="Country"
@@ -290,7 +290,7 @@ export const ContactForm: Story = {
  type="email"
  placeholder="your.email@example.com"
  required={true}
- onChange={(value) => console.log('Email:', value)}
+ onChange={(_value) => console.log('Email:', _value)}
  />
  </Box>
  <TextInputField
@@ -352,7 +352,7 @@ export const WithStatusMessages: Story = {
  type="email"
  placeholder="your.email@example.com"
  required={true}
- onChange={(value) => console.log('Email:', value)}
+ onChange={(_value) => console.log('Email:', _value)}
  />
  <Button
  label="Subscribe"
@@ -503,14 +503,14 @@ export const DataBindingBasic: Story = {
  type="email"
  placeholder="your.email@example.com"
  required={true}
- onChange={(value) => console.log('Email:', value)}
+ onChange={(_value) => console.log('Email:', _value)}
  />
  <TextInputField
  label="Password"
  type="password"
  placeholder="Enter your password"
  required={true}
- onChange={(value) => console.log('Password:', '***')}
+ onChange={() => console.log('Password:', '***')}
  />
  <Button
  label="Sign In"