@qwickapps/react-framework 1.3.4 → 1.4.0

package/src/stories/Section.stories.tsx

@@ -4,12 +4,15 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, Alert, Paper } from '@mui/material';
 import { JsonDataProvider } from '@qwickapps/schema';
 import type { Meta, StoryObj } from '@storybook/react';
 import QwickApp from '../components/QwickApp';
 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';
 
 // Sample CMS data for data binding stories
 const sampleCmsData = {
@@ -610,4 +613,89 @@ export const RealWorldExample: Story = {
       },
     },
   },
-};
+};
+
+// ModelView Serialization Examples
+export const ModelViewBasic: Story = {
+  render: () => {
+    // Demonstrate that Section extends ModelView
+    const sectionInstance = new Section({
+      background: '#f0f8ff',
+      padding: 'medium',
+      contentMaxWidth: 'lg',
+      component: 'section',
+      children: React.createElement('div', {}, 'Section content')
+    });
+
+    // Show ModelView metadata
+    const ComponentClass = sectionInstance.constructor as any;
+    const metadata = {
+      tagName: ComponentClass.tagName,
+      version: ComponentClass.version,
+      isModelView: sectionInstance instanceof ModelView,
+      supportsNestedComponents: true,
+      hasToJson: typeof sectionInstance.toJson === 'function'
+    };
+
+    return (
+      <QwickApp appId="section-modelview-basic" appName='Section ModelView Integration'>
+        <Box>
+          
+          <Box sx={{ mb: 6, textAlign: 'center' }}>
+            <Typography variant="h3" gutterBottom>Section Component ModelView Integration</Typography>
+            <Typography variant="h6" sx={{ mb: 4, opacity: 0.7 }}>
+              Section now extends the ModelView base class for standardized serialization
+            </Typography>
+            
+            <Alert severity="success" sx={{ mb: 4, textAlign: 'left' }}>
+              Section component now extends ModelView base class, providing standardized serialization
+              and data binding support. Section supports nested components through specialized serialization.
+            </Alert>
+          </Box>
+          
+          {/* ModelView Metadata */}
+          <Box sx={{ mb: 6 }}>
+            <Typography variant="h4" gutterBottom>🏗️ ModelView Metadata</Typography>
+            <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
+              Section component inherits ModelView capabilities and metadata
+            </Typography>
+            <Paper sx={{ p: 2, backgroundColor: 'grey.100', overflow: 'auto' }}>
+              <Code language="json" showLineNumbers={true} title="section-modelview-metadata.json">
+                {JSON.stringify(metadata, null, 2)}
+              </Code>
+            </Paper>
+          </Box>
+          
+          {/* Rendered Component */}
+          <Box>
+            <Typography variant="h4" gutterBottom>📦 Section Component (extends ModelView)</Typography>
+            <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
+              The rendered Section component with full ModelView functionality
+            </Typography>
+            <Section 
+              background="#f0f8ff"
+              padding="medium"
+              contentMaxWidth="lg"
+            >
+              <Typography variant="h5" gutterBottom>
+                ModelView Section Container
+              </Typography>
+              <Typography variant="body1">
+                This section extends ModelView base class, providing standardized serialization patterns
+                for layout containers with nested component support.
+              </Typography>
+            </Section>
+          </Box>
+          
+        </Box>
+      </QwickApp>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates Section component extending ModelView base class with nested component serialization.',
+      },
+    },
+  },
+};