@qwickapps/react-framework 1.4.1 → 1.4.3

package/src/stories/Button.stories.tsx

@@ -10,6 +10,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Code } from '../components/blocks';
 import { Button } from '../components/buttons/Button';
 import QwickApp from '../components/QwickApp';
+import { makeSerializationStory } from './_templates/SerializationTemplate';
 
 // Sample button data for different use cases
 const sampleCmsData = {
@@ -496,3 +497,26 @@ export const LoadingAndErrorStates: Story = {
     },
   },
 };
+
+/**
+ * SerializationDemo - Demonstrates button component serialization and deserialization
+ */
+export const SerializationDemo: StoryObj<typeof Button> = {
+  render: makeSerializationStory(() => (
+    <Button 
+      variant="primary" 
+      label="Serialize Me!" 
+      buttonSize="large"
+      fullWidth={false}
+      disabled={false}
+      loading={false}
+    />
+  )),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows how Button components are serialized to JSON and deserialized back to React components. Demonstrates the schema-driven architecture and round-trip serialization fidelity.',
+      },
+    },
+  },
+};

package/src/stories/ChoiceInputField.stories.tsx

@@ -10,6 +10,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Code } from '../components/blocks';
 import ChoiceInputField from '../components/input/ChoiceInputField';
 import QwickApp from '../components/QwickApp';
+import { makeSerializationStory } from './_templates/SerializationTemplate';
 import { useState } from 'react';
 
 // Sample choice input field data for different use cases
@@ -588,4 +589,30 @@ export const InteractiveDemo: Story = {
  },
  },
  },
-};
+};
+
+// Serialization Demo
+export const SerializationDemo: Story = {
+  render: makeSerializationStory(() => (
+    <ChoiceInputField
+      label="Serializable Choice Input"
+      options={[
+        'Option 1 - First Choice',
+        'Option 2 - Second Choice',
+        'Option 3 - Third Choice'
+      ]}
+      optionLabelPrefix="Choice"
+      placeholder="Enter new option..."
+      addButtonText="Add Option"
+      rows={3}
+      maxOptions={5}
+    />
+  )),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates ChoiceInputField serialization with all configuration options preserved.',
+      },
+    },
+  },
+};

package/src/stories/Code.stories.tsx

@@ -4,11 +4,13 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Box, Divider, Typography } from '@mui/material';
+import { Alert, Box, Divider, Paper, 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
 const sampleJavaScript = `function calculateFibonacci(n) {
@@ -649,6 +651,64 @@ function handleMissingData() {
   },
 };
 
+export const SerializationDemo: Story = {
+  render: makeSerializationStory(() => (
+    <Code 
+      language="typescript" 
+      title="user-manager.ts"
+      showLineNumbers={true}
+      showCopy={true}
+      wrapLines={false}
+      codeBackground="linear-gradient(135deg, #667eea20, #764ba220)"
+      sx={{ mb: 2, border: "1px solid #ddd" }}
+      onClick={(event) => { console.log("Code component clicked!"); }}
+      role="region"
+      aria-label="TypeScript code demonstration"
+      data-testid="serializable-code-block"
+      content={`// Complex TypeScript example with all Code features
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  preferences?: UserPreferences;
+}
+
+interface UserPreferences {
+  theme: 'light' | 'dark';
+  notifications: boolean;
+  language: string;
+}
+
+class UserManager {
+  private users: Map<string, User> = new Map();
+  
+  addUser(user: User): void {
+    this.users.set(user.id, user);
+  }
+  
+  getUser(id: string): User | undefined {
+    return this.users.get(id);
+  }
+  
+  updatePreferences(id: string, preferences: UserPreferences): boolean {
+    const user = this.users.get(id);
+    if (!user) return false;
+    
+    user.preferences = { ...user.preferences, ...preferences };
+    return true;
+  }
+}`}
+    />
+  )),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates Code component serialization and deserialization using ComponentTransformer.',
+      },
+    },
+  },
+};
+
 export const RealWorldExample: Story = {
   render: () => (
     <QwickApp appId="code-real-world" appName='Real World Code Examples' dataSource={{ dataProvider }}>