@qwickapps/react-framework 1.4.1 → 1.4.2

package/src/stories/Image.stories.tsx

@@ -554,67 +554,24 @@ export const ModelViewBasic: Story = {
   },
 };
 
+// Import makeSerializationStory for standardized serialization demos
+import { makeSerializationStory } from './_templates/SerializationTemplate';
+
 // Enhanced Serialization Examples - "WebView for React" functionality
 export const SerializationBasic: Story = {
-  render: () => {
-    // Create an Image component instance (now extends ModelView)
-    const originalImageComponent = (
-      <Image 
-        src={sampleImages.landscape}
-        alt="Serializable mountain landscape"
-        width={600}
-        height={400}
-        objectFit="cover"
-        objectPosition="center"
-        borderRadius="16px"
-        showLoading={true}
-        title="Beautiful mountain vista"
-      />
-    );
-    
-    // Serialize the component to JSON
-    const serialized = ComponentTransformer.serialize(originalImageComponent);
-    
-    // Deserialize back to a React component
-    const deserializedComponent = ComponentTransformer.deserialize(serialized);
-    
-    return (
-      <QwickApp appId="image-serialization-basic" appName='Basic Image Serialization'>
-        <Box sx={{ '& > *:not(:last-child)': { mb: 4 } }}>
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Original Image Component</Typography>
-            {originalImageComponent}
-          </Box>
-          
-          <Divider />
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Serialized JSON Data</Typography>
-            <Paper elevation={1} sx={{ p: 2, backgroundColor: 'grey.50' }}>
-              <Typography variant="body2" component="pre" sx={{ whiteSpace: 'pre-wrap', fontSize: '0.75rem' }}>
-                {JSON.stringify(JSON.parse(serialized), null, 2)}
-              </Typography>
-            </Paper>
-          </Box>
-          
-          <Divider />
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Deserialized Component (Recreated from JSON)</Typography>
-            {deserializedComponent}
-          </Box>
-          
-          <Alert severity="success">
-            <Typography variant="body2">
-              <strong>Serialization Success!</strong> The Image component was successfully serialized to JSON and deserialized back to a functional React component with all properties preserved.
-            </Typography>
-          </Alert>
-          
-        </Box>
-      </QwickApp>
-    );
-  },
+  render: makeSerializationStory(() => (
+    <Image 
+      src={sampleImages.landscape}
+      alt="Serializable mountain landscape"
+      width={600}
+      height={400}
+      objectFit="cover"
+      objectPosition="center"
+      borderRadius="16px"
+      showLoading={true}
+      title="Beautiful mountain vista"
+    />
+  )),
   parameters: {
     docs: {
       description: {
@@ -625,101 +582,25 @@ export const SerializationBasic: Story = {
 };
 
 export const SerializationComplex: Story = {
-  render: () => {
-    // Create a complex Image with multiple features
-    const complexImageComponent = (
-      <Image 
-        src={sampleImages.technology}
-        alt="Complex responsive technology image"
-        width={800}
-        height={500}
-        objectFit="cover"
-        objectPosition="center"
-        loading="lazy"
-        borderRadius="20px"
-        showLoading={true}
-        showError={true}
-        fallbackSrc={sampleImages.fallback}
-        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-        srcSet={`${sampleImages.technology}&w=400 400w, ${sampleImages.technology}&w=800 800w, ${sampleImages.technology}&w=1200 1200w`}
-        title="Advanced technology setup with multiple monitors"
-        draggable={false}
-      />
-    );
-    
-    // Serialize with all the complex properties
-    const serialized = ComponentTransformer.serialize(complexImageComponent);
-    const deserializedComponent = ComponentTransformer.deserialize(serialized);
-    
-    // Parse for display
-    const parsedData = JSON.parse(serialized);
-    
-    return (
-      <QwickApp appId="image-serialization-complex" appName='Complex Image Serialization'>
-        <Box sx={{ '& > *:not(:last-child)': { mb: 4 } }}>
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Original Complex Image</Typography>
-            <Typography variant="body2" color="text.secondary" gutterBottom>
-              Includes responsive srcSet, fallback image, loading states, and custom styling
-            </Typography>
-            {complexImageComponent}
-          </Box>
-          
-          <Divider />
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Serialized Properties</Typography>
-            <Grid container spacing={2}>
-              <Grid item xs={12} md={6}>
-                <Paper elevation={1} sx={{ p: 2, height: '300px', overflow: 'auto' }}>
-                  <Typography variant="subtitle2" gutterBottom>JSON Structure:</Typography>
-                  <Typography variant="body2" component="pre" sx={{ whiteSpace: 'pre-wrap', fontSize: '0.7rem' }}>
-                    {JSON.stringify(parsedData, null, 2)}
-                  </Typography>
-                </Paper>
-              </Grid>
-              <Grid item xs={12} md={6}>
-                <Paper elevation={1} sx={{ p: 2 }}>
-                  <Typography variant="subtitle2" gutterBottom>Key Properties:</Typography>
-                  <Typography variant="body2" component="div">
-                    • Component: <code>{parsedData.tag}</code><br />
-                    • Version: <code>{parsedData.version}</code><br />
-                    • Source: <code>{parsedData.data?.src ? 'Present' : 'Missing'}</code><br />
-                    • Alt text: <code>{parsedData.data?.alt ? 'Present' : 'Missing'}</code><br />
-                    • Dimensions: <code>{parsedData.data?.width}x{parsedData.data?.height}</code><br />
-                    • Object fit: <code>{parsedData.data?.objectFit}</code><br />
-                    • Border radius: <code>{parsedData.data?.borderRadius}</code><br />
-                    • Loading behavior: <code>{parsedData.data?.loading}</code><br />
-                    • Fallback: <code>{parsedData.data?.fallbackSrc ? 'Present' : 'None'}</code><br />
-                    • Responsive: <code>{parsedData.data?.srcSet ? 'Yes' : 'No'}</code>
-                  </Typography>
-                </Paper>
-              </Grid>
-            </Grid>
-          </Box>
-          
-          <Divider />
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Deserialized Component</Typography>
-            <Typography variant="body2" color="text.secondary" gutterBottom>
-              Recreated from JSON with all properties and functionality intact
-            </Typography>
-            {deserializedComponent}
-          </Box>
-          
-          <Alert severity="info">
-            <Typography variant="body2">
-              <strong>Advanced Serialization Success!</strong> All Image properties including responsive configuration, 
-              fallback handling, loading states, and styling were perfectly preserved through the serialization process.
-            </Typography>
-          </Alert>
-          
-        </Box>
-      </QwickApp>
-    );
-  },
+  render: makeSerializationStory(() => (
+    <Image 
+      src={sampleImages.technology}
+      alt="Complex responsive technology image"
+      width={800}
+      height={500}
+      objectFit="cover"
+      objectPosition="center"
+      loading="lazy"
+      borderRadius="20px"
+      showLoading={true}
+      showError={true}
+      fallbackSrc={sampleImages.fallback}
+      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+      srcSet={`${sampleImages.technology}&w=400 400w, ${sampleImages.technology}&w=800 800w, ${sampleImages.technology}&w=1200 1200w`}
+      title="Advanced technology setup with multiple monitors"
+      draggable={false}
+    />
+  )),
   parameters: {
     docs: {
       description: {
@@ -730,85 +611,16 @@ export const SerializationComplex: Story = {
 };
 
 export const SerializationWithDataBinding: Story = {
-  render: () => {
-    // Create a data-bound Image component
-    const dataBoundImageComponent = (
-      <Image 
-        dataSource={dataProvider.createDataSource('gallery.heroImage')}
-        bindingOptions={{
-          cache: true,
-          cacheTTL: 300000,
-          strict: false
-        }}
-      />
-    );
-    
-    // Serialize the data-bound component
-    const serialized = ComponentTransformer.serialize(dataBoundImageComponent);
-    const deserializedComponent = ComponentTransformer.deserialize(serialized);
-    const parsedData = JSON.parse(serialized);
-    
-    return (
-      <QwickApp appId="image-serialization-databound" appName='Data-Bound Image Serialization'>
-        <Box sx={{ '& > *:not(:last-child)': { mb: 4 } }}>
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Original Data-Bound Image</Typography>
-            <Typography variant="body2" color="text.secondary" gutterBottom>
-              Image loaded from CMS data source with caching enabled
-            </Typography>
-            {dataBoundImageComponent}
-          </Box>
-          
-          <Divider />
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Serialized Data Binding</Typography>
-            <Grid container spacing={2}>
-              <Grid item xs={12} md={8}>
-                <Paper elevation={1} sx={{ p: 2 }}>
-                  <Typography variant="subtitle2" gutterBottom>Serialized JSON:</Typography>
-                  <Typography variant="body2" component="pre" sx={{ whiteSpace: 'pre-wrap', fontSize: '0.7rem', maxHeight: '200px', overflow: 'auto' }}>
-                    {JSON.stringify(parsedData, null, 2)}
-                  </Typography>
-                </Paper>
-              </Grid>
-              <Grid item xs={12} md={4}>
-                <Paper elevation={1} sx={{ p: 2 }}>
-                  <Typography variant="subtitle2" gutterBottom>Data Binding Info:</Typography>
-                  <Typography variant="body2" component="div">
-                    • Data source: <code>{parsedData.data?.dataSource ? 'Preserved' : 'Missing'}</code><br />
-                    • Binding options: <code>{parsedData.data?.bindingOptions ? 'Present' : 'None'}</code><br />
-                    • Cache enabled: <code>{parsedData.data?.bindingOptions?.cache ? 'Yes' : 'No'}</code><br />
-                    • Cache TTL: <code>{parsedData.data?.bindingOptions?.cacheTTL || 'Default'}</code><br />
-                    • Strict mode: <code>{parsedData.data?.bindingOptions?.strict ? 'Yes' : 'No'}</code>
-                  </Typography>
-                </Paper>
-              </Grid>
-            </Grid>
-          </Box>
-          
-          <Divider />
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Deserialized Data-Bound Component</Typography>
-            <Typography variant="body2" color="text.secondary" gutterBottom>
-              Recreated with full data binding functionality preserved
-            </Typography>
-            {deserializedComponent}
-          </Box>
-          
-          <Alert severity="success">
-            <Typography variant="body2">
-              <strong>Data Binding Serialization Success!</strong> The Image component with CMS data binding, 
-              caching configuration, and all binding options was successfully serialized and recreated.
-            </Typography>
-          </Alert>
-          
-        </Box>
-      </QwickApp>
-    );
-  },
+  render: makeSerializationStory(() => (
+    <Image 
+      dataSource={dataProvider.createDataSource('gallery.heroImage')}
+      bindingOptions={{
+        cache: true,
+        cacheTTL: 300000,
+        strict: false
+      }}
+    />
+  )),
   parameters: {
     docs: {
       description: {

package/src/stories/Markdown.stories.tsx

@@ -103,7 +103,7 @@ interface AppConfig {
 
 const config: AppConfig = {
  name: 'QwickApp',
- version: '2.0.0',
+ version: '1.0.0',
  features: ['responsive', 'theming', 'components']
 };
 \`\`\`

package/src/stories/Section.stories.tsx

@@ -4,15 +4,15 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Box, Typography, Alert, Paper } from '@mui/material';
+import { Alert, Box, Paper, Typography } from '@mui/material';
 import { JsonDataProvider } from '@qwickapps/schema';
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import QwickApp from '../components/QwickApp';
+import { ModelView } from '../components/base/ModelView';
 import { Code } from '../components/blocks';
 import Section from '../components/blocks/Section';
-import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
-import { ModelView } from '../components/base/ModelView';
-import React from 'react';
+import { makeSerializationStory } from './_templates/SerializationTemplate';
 
 // Sample CMS data for data binding stories
 const sampleCmsData = {
@@ -699,3 +699,37 @@ export const ModelViewBasic: Story = {
     },
   },
 };
+
+/**
+ * SerializationDemo - Demonstrates section component serialization
+ */
+export const SerializationDemo: StoryObj<typeof Section> = {
+  render: makeSerializationStory(() => (
+    <Section 
+      background="primary.light"
+      padding="large"
+      contentMaxWidth="md"
+      component="section"
+    >
+      <Typography variant="h4" component="h2" gutterBottom>
+        Section Serialization Demo
+      </Typography>
+      <Typography variant="body1" paragraph>
+        This section demonstrates how container components serialize their children
+        while maintaining proper semantic HTML structure.
+      </Typography>
+      <Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', mt: 2 }}>
+        <Typography variant="caption" color="text.secondary">
+          Content max width: md • Padding: large • Component: section
+        </Typography>
+      </Box>
+    </Section>
+  )),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows how Section components are serialized with their nested children and semantic HTML structure preserved.',
+      },
+    },
+  },
+};

package/src/stories/SelectInputField.stories.tsx

@@ -10,6 +10,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Code } from '../components/blocks';
 import SelectInputField from '../components/input/SelectInputField';
 import QwickApp from '../components/QwickApp';
+import { makeSerializationStory } from './_templates/SerializationTemplate';
 
 // Sample select field data for different use cases
 const sampleCmsData = {
@@ -602,4 +603,28 @@ export const OptionsShowcase: Story = {
  },
  },
  },
-};
+};
+
+// Serialization Demo
+export const SerializationDemo: Story = {
+  render: makeSerializationStory(() => (
+    <SelectInputField
+      label="Serializable Select Field"
+      options={[
+        { value: 'option1', label: 'First Option' },
+        { value: 'option2', label: 'Second Option' },
+        { value: 'option3', label: 'Third Option' }
+      ]}
+      placeholder="Choose an option..."
+      required={true}
+      helpText="This select field demonstrates serialization"
+    />
+  )),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates SelectInputField serialization with options and configuration preserved.',
+      },
+    },
+  },
+};

package/src/stories/Text.stories.tsx

@@ -10,6 +10,7 @@ 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';
 
@@ -419,61 +420,28 @@ export const DataBinding: Story = {
   )
 };
 
-// Serialization example
-export const SerializationExample: Story = {
-  render: () => {
-    // Create Text component instances
-    const originalText = new Text({
-      content: 'Serializable Typography Component',
-      variant: 'h3',
-      color: 'primary',
-      align: 'center',
-      fontWeight: 'bold',
-      gutterBottom: true,
-      customColor: '#1976d2',
-      fontSize: '2rem'
-    });
-
-    // Serialize to JSON
-    const serializedJson = ComponentTransformer.serialize(originalText.render());
-    
-    // Deserialize back to component
-    const deserializedComponent = ComponentTransformer.deserialize(serializedJson);
-
-    return (
-      <Paper elevation={2} sx={{ p: 3 }}>
-        <Typography variant="h5" gutterBottom>
-          Text Component Serialization Demo
-        </Typography>
-        
-        <Alert severity="success" sx={{ mb: 3 }}>
-          <Typography variant="body2">
-            This demonstrates full JSON serialization/deserialization of Text components.
-            The component below was serialized to JSON and then reconstructed.
-          </Typography>
-        </Alert>
-
-        <Box sx={{ mb: 3 }}>
-          <Typography variant="h6" gutterBottom>Original Component:</Typography>
-          {originalText.render()}
-        </Box>
-
-        <Box sx={{ mb: 3 }}>
-          <Typography variant="h6" gutterBottom>Serialized JSON:</Typography>
-          <Paper variant="outlined" sx={{ p: 2, bgcolor: 'grey.50' }}>
-            <pre style={{ margin: 0, fontSize: '12px', wordWrap: 'break-word', whiteSpace: 'pre-wrap' }}>
-              {JSON.stringify(JSON.parse(serializedJson), null, 2)}
-            </pre>
-          </Paper>
-        </Box>
 
-        <Box>
-          <Typography variant="h6" gutterBottom>Deserialized Component:</Typography>
-          {deserializedComponent}
-        </Box>
-      </Paper>
-    );
-  }
+// Serialization example - using the standardized template
+export const SerializationExample: Story = {
+  render: makeSerializationStory(() => (
+    <Text 
+      content="Serializable Typography Component"
+      variant="h3"
+      color="primary"
+      align="center"
+      fontWeight="bold"
+      gutterBottom={true}
+      customColor="#1976d2"
+      fontSize="2rem"
+    />
+  )),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates Text component serialization and deserialization using ComponentTransformer.',
+      },
+    },
+  },
 };
 
 // Advanced layout example

package/src/stories/TextInputField.stories.tsx

@@ -10,6 +10,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Code } from '../components/blocks';
 import TextInputField from '../components/input/TextInputField';
 import QwickApp from '../components/QwickApp';
+import { makeSerializationStory } from './_templates/SerializationTemplate';
 
 // Sample text input field data for different use cases
 const sampleCmsData = {
@@ -523,4 +524,26 @@ export const FieldStatesShowcase: Story = {
  },
  },
  },
-};
+};
+
+// Serialization Demo
+export const SerializationDemo: Story = {
+  render: makeSerializationStory(() => (
+    <TextInputField
+      label="Serializable Text Field"
+      placeholder="Enter your text here..."
+      required={true}
+      disabled={false}
+      rows={3}
+      maxLength={100}
+      helpText="This field demonstrates serialization capabilities"
+    />
+  )),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates TextInputField serialization with all configuration options preserved.',
+      },
+    },
+  },
+};