@qwickapps/react-framework 1.4.8 → 1.5.0

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"

package/src/stories/FormComponents.stories.tsx

@@ -284,10 +284,9 @@ export const SelectInputFieldShowcase: Story = {
   )
 };
 
-export const CompleteFormExample: Story = {
-  name: 'Complete Form - All Components Together',
-  render: () => {
-    const [formData, setFormData] = useState({
+// Complete Form Component
+const CompleteFormComponent = () => {
+    const [formData] = useState({
       name: '',
       email: '',
       country: '',
@@ -313,7 +312,7 @@ export const CompleteFormExample: Story = {
             placeholder="Enter your full name"
             required={true}
           />
-          
+
           <TextInputField
             label="Email Address"
             value={formData.email}
@@ -322,7 +321,7 @@ export const CompleteFormExample: Story = {
             required={true}
             helperText="We'll use this to send you important updates"
           />
-          
+
           <SelectInputField
             label="Country"
             value={formData.country}
@@ -336,7 +335,7 @@ export const CompleteFormExample: Story = {
             ]}
             required={true}
           />
-          
+
           <HtmlInputField
             label="About Yourself"
             value={formData.description}
@@ -344,7 +343,7 @@ export const CompleteFormExample: Story = {
             rows={4}
             multiline={true}
           />
-          
+
           <ChoiceInputField
             label="Interests"
             options={formData.interests}
@@ -352,14 +351,14 @@ export const CompleteFormExample: Story = {
             placeholder="Add your interests..."
             addButtonText="Add Interest"
           />
-          
+
           <SwitchInputField
             label="Email Notifications"
             checked={formData.notifications}
             helperText="Receive important updates via email"
             color="primary"
           />
-          
+
           <SwitchInputField
             label="Newsletter Subscription"
             checked={formData.newsletter}
@@ -387,5 +386,10 @@ export const CompleteFormExample: Story = {
         />
       </Box>
     );
-  }
+};
+CompleteFormComponent.displayName = 'CompleteFormComponent';
+
+export const CompleteFormExample: Story = {
+  name: 'Complete Form - All Components Together',
+  render: () => <CompleteFormComponent />
 };

package/src/stories/GridCell.stories.tsx

@@ -13,11 +13,11 @@ import { makeSerializationStory } from './_templates/SerializationTemplate';
 import React from 'react';
 
 // Ensure components are registered for serialization
-ComponentTransformer.registerComponent(GridCell as any);
-ComponentTransformer.registerComponent(Text as any);
-ComponentTransformer.registerComponent(Button as any);
-ComponentTransformer.registerComponent(Code as any);
-ComponentTransformer.registerComponent(Image as any);
+ComponentTransformer.registerComponent(GridCell as React.ComponentType);
+ComponentTransformer.registerComponent(Text as React.ComponentType);
+ComponentTransformer.registerComponent(Button as React.ComponentType);
+ComponentTransformer.registerComponent(Code as React.ComponentType);
+ComponentTransformer.registerComponent(Image as React.ComponentType);
 
 const meta: Meta<typeof GridCell> = {
   title: 'Layout/GridCell',

package/src/stories/GridLayout.stories.tsx

@@ -13,11 +13,11 @@ import { makeSerializationStory } from './_templates/SerializationTemplate';
 import React from 'react';
 
 // Ensure components are registered for serialization
-ComponentTransformer.registerComponent(GridLayout as any);
-ComponentTransformer.registerComponent(GridCell as any);
-ComponentTransformer.registerComponent(Text as any);
-ComponentTransformer.registerComponent(Button as any);
-ComponentTransformer.registerComponent(Code as any);
+ComponentTransformer.registerComponent(GridLayout as React.ComponentType);
+ComponentTransformer.registerComponent(GridCell as React.ComponentType);
+ComponentTransformer.registerComponent(Text as React.ComponentType);
+ComponentTransformer.registerComponent(Button as React.ComponentType);
+ComponentTransformer.registerComponent(Code as React.ComponentType);
 
 const meta: Meta<typeof GridLayout> = {
   title: 'Layout/GridLayout',

package/src/stories/Image.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, Grid } from '@mui/material';
 import { JsonDataProvider } from '@qwickapps/schema';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Image } from '../components/blocks';
-import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
-import { ModelView } from '../components/base/ModelView';
 import QwickApp from '../components/QwickApp';
 import React from 'react';
 
@@ -380,7 +378,7 @@ export const InteractiveFeatures: Story = {
             objectFit="cover"
             borderRadius="12px"
             showLoading={true}
-            onClick={(e) => alert('Image clicked!')}
+            onClick={() => alert('Image clicked!')}
             style={{ cursor: 'pointer', transition: 'transform 0.2s', '&:hover': { transform: 'scale(1.02)' } }}
             title="Click me!"
           />
@@ -523,9 +521,9 @@ export const ModelViewBasic: Story = {
     
     // Show that it has ModelView properties
     const hasToJson = typeof imageInstance.toJson === 'function';
-    const hasFromJson = typeof (imageInstance.constructor as any).fromJson === 'function';
-    const tagName = (imageInstance.constructor as any).tagName;
-    const version = (imageInstance.constructor as any).version;
+    const hasFromJson = typeof (imageInstance.constructor as Record<string, unknown>).fromJson === 'function';
+    const tagName = (imageInstance.constructor as Record<string, unknown>).tagName as string;
+    const version = (imageInstance.constructor as Record<string, unknown>).version as string;
     
     return (
       <QwickApp appId="image-modelview" appName='Image ModelView Demonstration'>

package/src/stories/Introduction.stories.tsx

@@ -32,7 +32,6 @@ import {
 } from '@mui/icons-material';
 import Logo from '../components/Logo';
 import { Code } from '../components/blocks';
-import { Button } from '../components/buttons/Button';
 
 const meta: Meta = {
  title: 'Introduction',

package/src/stories/ModelView.stories.tsx

@@ -4,7 +4,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Box, Typography, Alert, Paper, Divider } from '@mui/material';
+import { Box, Typography, Alert, Paper } from '@mui/material';
 import { JsonDataProvider } from '@qwickapps/schema';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Code } from '../components/blocks';
@@ -28,7 +28,7 @@ class Code extends ModelView<CodeProps, CodeModel> {
   static readonly tagName = 'Code';
   static readonly version = '1.0.0';
   
-  protected getComponentSpecificProps(): any {
+  protected getComponentSpecificProps(): unknown {
     return {
       language: this.props.language,
       showCopy: this.props.showCopy,
@@ -123,7 +123,7 @@ export abstract class ModelView<TProps, TModel>
   static readonly version: string;
   
   // Common serialization implementation
-  toJson(): any {
+  toJson(): unknown {
     return {
       ...this.getBaseSerializableProps(),
       ...this.getComponentSpecificProps()
@@ -131,7 +131,7 @@ export abstract class ModelView<TProps, TModel>
   }
   
   // Base props all components serialize
-  protected getBaseSerializableProps(): any {
+  protected getBaseSerializableProps(): unknown {
     return {
       children: this.serializeChildren(this.props.children),
       dataSource: this.props.dataSource,
@@ -142,7 +142,7 @@ export abstract class ModelView<TProps, TModel>
   }
   
   // Hook for component-specific props (implemented by subclasses)
-  protected abstract getComponentSpecificProps(): any;
+  protected abstract getComponentSpecificProps(): unknown;
   
   // Common render pattern
   render() {
@@ -168,12 +168,12 @@ export class Code extends ModelView<CodeProps, CodeModel> {
   static readonly version = '1.0.0';
   
   // Required: Deserialization factory method
-  static fromJson(jsonData: any): ReactElement {
+  static fromJson(jsonData: unknown): ReactElement {
     return <Code {...jsonData} />;
   }
   
   // Required: Component-specific serialization properties
-  protected getComponentSpecificProps(): any {
+  protected getComponentSpecificProps(): unknown {
     return {
       language: this.props.language,
       showCopy: this.props.showCopy,