@qwickapps/react-framework 1.4.9 → 1.5.0

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,

package/src/stories/SafeSpan.stories.tsx

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

package/src/stories/Section.stories.tsx

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

package/src/stories/Text.stories.tsx

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

package/src/stories/_templates/SerializationTemplate.tsx

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

package/src/templates/TemplateResolver.ts

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

package/src/types/CollapsibleLayout.ts

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

package/src/types/ContentProxy.ts

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

package/src/types/DataTypes.ts

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

package/src/types/TemplateProvider.ts

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

package/src/types/TemplateResolver.ts

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

package/src/utils/htmlTransform.tsx

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