@qwickapps/react-framework 1.3.4 → 1.4.0

package/src/stories/FormComponents.stories.tsx

@@ -1,588 +1,396 @@
 /**
- * Form Components Stories - Testing new base props pattern
+ * Form Components Stories - Comprehensive showcase of all form components
+ * 
+ * Demonstrates all form components with serialization examples:
+ * - TextInputField: Text input with validation and different types
+ * - SelectInputField: Dropdown selection with complex options
+ * - HtmlInputField: Rich HTML editor with formatting controls
+ * - ChoiceInputField: Dynamic option management
+ * - SwitchInputField: Boolean toggle controls
+ * - FormBlock: Complete form layout container
+ * 
+ * Includes serialization examples to demonstrate "WebView for React" functionality.
+ * 
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import { Box, Paper, Typography } from '@mui/material';
+import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from '../components/buttons/Button';
-import { TextField } from '../components/input/TextField';
-import { GridCell } from '../components/layout/GridCell';
-import GridLayout from '../components/layout/GridLayout';
+import { Box, Typography, Paper, Button, Alert } from '@mui/material';
+import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
+
+// Import form components
+import { TextInputField } from '../components/input/TextInputField';
+import { SelectInputField } from '../components/input/SelectInputField';
+import { HtmlInputField } from '../components/input/HtmlInputField';
+import { ChoiceInputField } from '../components/input/ChoiceInputField';
+import { SwitchInputField } from '../components/input/SwitchInputField';
+import { FormBlock } from '../components/forms/FormBlock';
+
+// Ensure components are registered for serialization
+import '../schemas/transformers/registry';
 
 const meta: Meta = {
-  title: 'Forms/Enhanced Components',
+  title: 'Form Components/Complete Showcase',
   parameters: {
-    layout: 'padded',
+    layout: 'fullscreen',
     docs: {
       description: {
-        component: `Enhanced form components with base props support and grid integration.
-
-**Key Features:**
-- T-shirt sizing for dimensions and spacing (tiny, small, medium, large, x-large)
-- Seamless grid behavior when used in GridLayout
-- Background and styling props with theme integration
-- Responsive breakpoint support (xs, sm, md, lg, xl)
-- Consistent prop resolution and inheritance
+        component: `
+Comprehensive showcase of all form components with serialization capabilities.
+Each component extends ModelView and supports JSON serialization/deserialization.
 
-**Perfect For:**
-- Building responsive forms with minimal code
-- Creating consistent layouts across your application
-- Rapid prototyping with standardized sizing
-- Complex form layouts with grid positioning`,
-      },
-    },
-  },
+**Features:**
+- Full form component library
+- JSON serialization for "WebView for React"
+- Data binding support
+- Validation and error handling
+- Performance optimized
+        `
+      }
+    }
+  }
 };
 
 export default meta;
+type Story = StoryObj;
 
-export const BasicTextField: StoryObj = {
-  render: () => (
-    <Box>
-      <h3>TextField with T-shirt Sizing</h3>
-      <TextField
-        label="Small Width"
-        width="small"
-        margin="normal"
-        padding="small"
-      />
-      <br />
-      <TextField
-        label="Large Width"
-        width="large"
-        margin="normal"
-        padding="large"
-        background="primary.light"
-      />
-    </Box>
-  ),
-};
+// Helper component for serialization demonstration
+const SerializationDemo: React.FC<{ 
+  title: string; 
+  component: React.ReactElement; 
+}> = ({ title, component }) => {
+  const [serializedData, setSerializedData] = useState<string>('');
+  const [deserializedComponent, setDeserializedComponent] = useState<React.ReactElement | null>(null);
+  const [error, setError] = useState<string>('');
 
-export const BasicButton: StoryObj = {
-  render: () => (
-    <Box>
-      <h3>Button with T-shirt Sizing</h3>
-      <Button
-        variant="contained"
-        width="small"
-        margin="medium"
-      >
-        Small Width
-      </Button>
-      <br />
-      <Button
-        variant="contained"
-        width="large"
-        margin="normal"
-        padding="large"
-      >
-        Large Width
-      </Button>
-    </Box>
-  ),
-};
-
-export const InColumnLayout: StoryObj = {
-  render: () => (
-    <Box>
-      <h3>Components in GridLayout</h3>
-      <GridLayout spacing="medium">
-        <TextField
-          label="Half Width"
-          span={6}
-          fullWidth
-        />
-        <TextField
-          label="Half Width"
-          span={6}
-          fullWidth
-        />
-        <TextField
-          label="Full Width"
-          span={12}
-          fullWidth
-        />
-        <Button
-          variant="contained"
-          span={4}
-        >
-          One Third
-        </Button>
-        <Button
-          variant="outlined"
-          span={4}
-        >
-          One Third
-        </Button>
-        <Button
-          variant="text"
-          span={4}
-        >
-          One Third
-        </Button>
-      </GridLayout>
-    </Box>
-  ),
-};
+  const handleSerialize = () => {
+    try {
+      const serialized = ComponentTransformer.serialize(component);
+      setSerializedData(serialized);
+      setError('');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Serialization failed');
+    }
+  };
 
-export const ResponsiveGrid: StoryObj = {
-  render: () => (
-    <Box>
-      <h3>Responsive Grid Behavior</h3>
-      <GridLayout spacing="medium">
-        <TextField
-          label="Mobile: Full, Tablet: Half, Desktop: Quarter"
-          xs={12}
-          sm={6}
-          md={3}
-          fullWidth
-        />
-        <TextField
-          label="Mobile: Full, Tablet: Half, Desktop: Quarter"
-          xs={12}
-          sm={6}
-          md={3}
-          fullWidth
-        />
-        <TextField
-          label="Mobile: Full, Tablet: Half, Desktop: Quarter"
-          xs={12}
-          sm={6}
-          md={3}
-          fullWidth
-        />
-        <TextField
-          label="Mobile: Full, Tablet: Half, Desktop: Quarter"
-          xs={12}
-          sm={6}
-          md={3}
-          fullWidth
-        />
-      </GridLayout>
-    </Box>
-  ),
-};
+  const handleDeserialize = () => {
+    try {
+      if (serializedData) {
+        const deserialized = ComponentTransformer.deserialize(serializedData) as React.ReactElement;
+        setDeserializedComponent(deserialized);
+        setError('');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Deserialization failed');
+    }
+  };
 
-export const WithStyling: StoryObj = {
-  render: () => (
-    <Box>
-      <h3>Advanced Styling</h3>
-      <GridLayout spacing="large">
-        <TextField
-          label="With Background"
-          span={6}
-          fullWidth
-          background="linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
-          padding="medium"
-          sx={{ '& .MuiInputBase-root': { color: 'white' } }}
-        />
-        <TextField
-          label="With Custom Height"
-          span={6}
-          fullWidth
-          height={80}
-          padding="medium"
-        />
-        <Button
-          variant="contained"
-          span={12}
-          height="small"
-          padding="large"
-          background="linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)"
-        >
-          Gradient Button with Height
-        </Button>
-      </GridLayout>
-    </Box>
-  ),
-};
+  return (
+    <Paper elevation={2} sx={{ p: 3, mb: 4 }}>
+      <Typography variant="h6" gutterBottom>
+        {title}
+      </Typography>
+      
+      {/* Original Component */}
+      <Box sx={{ mb: 2 }}>
+        <Typography variant="subtitle2" color="text.secondary" gutterBottom>
+          Original Component:
+        </Typography>
+        {component}
+      </Box>
 
-export const LoginFormExample: StoryObj = {
-  render: () => (
-    <Box sx={{ maxWidth: 400, mx: 'auto', p: 3 }}>
-      <h3>Login Form with New Components</h3>
-      <GridLayout spacing="medium">
-        <TextField
-          label="Email"
-          type="email"
-          span={12}
-          fullWidth
-          required
-        />
-        <TextField
-          label="Password"
-          type="password"
-          span={12}
-          fullWidth
-          required
-        />
-        <Button
-          variant="contained"
-          span={12}
-          size="large"
-          padding="medium"
+      {/* Serialization Controls */}
+      <Box sx={{ mb: 2, display: 'flex', gap: 2 }}>
+        <Button 
+          variant="outlined" 
+          size="small" 
+          onClick={handleSerialize}
         >
-          Sign In
+          Serialize to JSON
         </Button>
-        <Button
-          variant="text"
-          span={6}
-          size="small"
+        <Button 
+          variant="outlined" 
+          size="small" 
+          onClick={handleDeserialize}
+          disabled={!serializedData}
         >
-          Forgot Password?
+          Deserialize from JSON
         </Button>
-        <Button
-          variant="text"
-          span={6}
-          size="small"
-        >
-          Sign Up
-        </Button>
-      </GridLayout>
-    </Box>
-  ),
-};
-
-// === T-SHIRT SIZING TESTS ===
-
-export const TSizingDimensions: StoryObj = {
-  name: 'T-Shirt Sizing - Dimensions',
-  render: () => (
-    <Box sx={{ p: 2 }}>
-      <Typography variant="h6" gutterBottom>Width Sizing</Typography>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 4 }}>
-        <TextField label="Tiny Width" width="tiny" />
-        <TextField label="Small Width" width="small" />
-        <TextField label="Medium Width" width="medium" />
-        <TextField label="Large Width" width="large" />
-        <TextField label="X-Large Width" width="x-large" />
-        <TextField label="Auto Width" width="auto" />
-        <TextField label="Custom 300px" width="300px" />
-        <TextField label="Custom 50%" width="50%" />
       </Box>
 
-      <Typography variant="h6" gutterBottom>Height Sizing (Buttons)</Typography>
-      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
-        <Button height="tiny">Tiny</Button>
-        <Button height="small">Small</Button>
-        <Button height="medium">Medium</Button>
-        <Button height="large">Large</Button>
-        <Button height="x-large">X-Large</Button>
-        <Button height="60px">60px</Button>
-      </Box>
-    </Box>
-  ),
-};
-
-export const TSizingSpacing: StoryObj = {
-  name: 'T-Shirt Sizing - Spacing',
-  render: () => (
-    <Box sx={{ p: 2 }}>
-      <Typography variant="h6" gutterBottom>Padding Variations</Typography>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, mb: 4 }}>
-        <TextField label="No Padding" padding="none" background="#f0f0f0" />
-        <TextField label="Tiny Padding" padding="tiny" background="#f0f0f0" />
-        <TextField label="Small Padding" padding="small" background="#f0f0f0" />
-        <TextField label="Medium Padding" padding="medium" background="#f0f0f0" />
-        <TextField label="Large Padding" padding="large" background="#f0f0f0" />
-        <TextField label="X-Large Padding" padding="x-large" background="#f0f0f0" />
-        <TextField label="Custom 20px" padding="20px" background="#f0f0f0" />
-      </Box>
+      {/* Error Display */}
+      {error && (
+        <Alert severity="error" sx={{ mb: 2 }}>
+          {error}
+        </Alert>
+      )}
 
-      <Typography variant="h6" gutterBottom>Margin Variations</Typography>
-      <Box sx={{ border: '1px dashed #ccc', p: 1 }}>
-        <TextField label="No Margin" margin="none" background="#e3f2fd" />
-        <TextField label="Tiny Margin" margin="tiny" background="#e8f5e8" />
-        <TextField label="Small Margin" margin="small" background="#fff3e0" />
-        <TextField label="Medium Margin" margin="medium" background="#fce4ec" />
-        <TextField label="Large Margin" margin="large" background="#f3e5f5" />
-        <TextField label="X-Large Margin" margin="x-large" background="#e0f2f1" />
-      </Box>
-    </Box>
-  ),
-};
-
-// === GRID BEHAVIOR TESTS ===
+      {/* Serialized JSON */}
+      {serializedData && (
+        <Box sx={{ mb: 2 }}>
+          <Typography variant="subtitle2" color="text.secondary" gutterBottom>
+            Serialized JSON:
+          </Typography>
+          <Paper
+            variant="outlined"
+            sx={{
+              p: 2,
+              backgroundColor: 'grey.50',
+              maxHeight: 200,
+              overflow: 'auto'
+            }}
+          >
+            <pre style={{ margin: 0, fontSize: '0.8rem' }}>
+              {JSON.stringify(JSON.parse(serializedData), null, 2)}
+            </pre>
+          </Paper>
+        </Box>
+      )}
 
-export const GridSpanTests: StoryObj = {
-  name: 'Grid Behavior - Span',
-  render: () => (
-    <Box sx={{ p: 2 }}>
-      <Typography variant="h6" gutterBottom>Span Property (Equal Distribution)</Typography>
-      <GridLayout spacing="small">
-        <TextField label="Span 12 (Full)" span={12} fullWidth background="#ffebee" />
-        <TextField label="Span 6" span={6} fullWidth background="#e8f5e8" />
-        <TextField label="Span 6" span={6} fullWidth background="#e8f5e8" />
-        <TextField label="Span 4" span={4} fullWidth background="#e3f2fd" />
-        <TextField label="Span 4" span={4} fullWidth background="#e3f2fd" />
-        <TextField label="Span 4" span={4} fullWidth background="#e3f2fd" />
-        <Button span={3} variant="outlined">Span 3</Button>
-        <Button span={3} variant="outlined">Span 3</Button>
-        <Button span={3} variant="outlined">Span 3</Button>
-        <Button span={3} variant="outlined">Span 3</Button>
-      </GridLayout>
-    </Box>
-  ),
+      {/* Deserialized Component */}
+      {deserializedComponent && (
+        <Box>
+          <Typography variant="subtitle2" color="text.secondary" gutterBottom>
+            Deserialized Component:
+          </Typography>
+          <Box sx={{ p: 2, border: '2px dashed', borderColor: 'success.main', borderRadius: 1 }}>
+            {deserializedComponent}
+          </Box>
+        </Box>
+      )}
+    </Paper>
+  );
 };
 
-export const GridResponsiveTests: StoryObj = {
-  name: 'Grid Behavior - Responsive',
+export const TextInputFieldShowcase: Story = {
+  name: 'TextInputField - Text Input Component',
   render: () => (
-    <Box sx={{ p: 2 }}>
-      <Typography variant="h6" gutterBottom>Responsive Breakpoints</Typography>
-      <Typography variant="body2" sx={{ mb: 2, color: 'text.secondary' }}>
-        Resize browser to see responsive behavior: xs=mobile, sm=tablet, md=desktop
+    <Box sx={{ p: 4 }}>
+      <Typography variant="h4" gutterBottom>
+        TextInputField Serialization Examples
       </Typography>
-      <GridLayout spacing="medium">
-        <TextField
-          label="xs:12, sm:6, md:4"
-          xs={12} sm={6} md={4}
-          fullWidth
-          background="#ffebee"
-        />
-        <TextField
-          label="xs:12, sm:6, md:4"
-          xs={12} sm={6} md={4}
-          fullWidth
-          background="#e8f5e8"
-        />
-        <TextField
-          label="xs:12, sm:6, md:4"
-          xs={12} sm={6} md={4}
-          fullWidth
-          background="#e3f2fd"
-        />
-        <Button
-          xs={12} sm={12} md={6}
-          variant="contained"
-          fullWidth
-        >
-          xs:12, sm:12, md:6
-        </Button>
-        <Button
-          xs={12} sm={12} md={6}
-          variant="outlined"
-          fullWidth
-        >
-          xs:12, sm:12, md:6
-        </Button>
-      </GridLayout>
-    </Box>
-  ),
-};
+      
+      <SerializationDemo
+        title="Basic Text Input"
+        component={
+          <TextInputField
+            label="Full Name"
+            value="John Doe"
+            placeholder="Enter your full name"
+            required={true}
+          />
+        }
+      />
 
-// === BACKGROUND TESTS ===
+      <SerializationDemo
+        title="Email Input with Validation"
+        component={
+          <TextInputField
+            label="Email Address"
+            value="user@example.com"
+            type="email"
+            required={true}
+            helperText="We'll never share your email with anyone else."
+          />
+        }
+      />
 
-export const BackgroundTests: StoryObj = {
-  name: 'Background Variations',
-  render: () => (
-    <Box sx={{ p: 2 }}>
-      <Typography variant="h6" gutterBottom>Background Colors & Gradients</Typography>
-      <GridLayout spacing="medium">
-        <TextField
-          label="Primary Background"
-          span={6}
-          fullWidth
-          background="primary.light"
-          padding="medium"
-        />
-        <TextField
-          label="Secondary Background"
-          span={6}
-          fullWidth
-          background="secondary.light"
-          padding="medium"
-        />
-        <TextField
-          label="Custom Color"
-          span={4}
-          fullWidth
-          background="#4caf50"
-          padding="medium"
-        />
-        <TextField
-          label="RGB Color"
-          span={4}
-          fullWidth
-          background="rgb(255, 152, 0)"
-          padding="medium"
-        />
-        <TextField
-          label="Hex Color"
-          span={4}
-          fullWidth
-          background="#9c27b0"
-          padding="medium"
-        />
-        <TextField
-          label="Linear Gradient"
-          span={12}
-          fullWidth
-          background="linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
-          padding="large"
-          sx={{ '& .MuiInputBase-root': { color: 'white' } }}
-        />
-        <Button
-          span={6}
-          variant="contained"
-          background="linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)"
-          padding="medium"
-        >
-          Gradient Button
-        </Button>
-        <Button
-          span={6}
-          variant="outlined"
-          background="radial-gradient(circle, #ff6b6b, #ee5a24)"
-          padding="medium"
-        >
-          Radial Gradient
-        </Button>
-      </GridLayout>
+      <SerializationDemo
+        title="Multiline Textarea"
+        component={
+          <TextInputField
+            label="Description"
+            value="This is a multi-line description field that can contain longer text content."
+            multiline={true}
+            rows={4}
+            placeholder="Enter a detailed description..."
+          />
+        }
+      />
+
+      <SerializationDemo
+        title="Password Input with Error State"
+        component={
+          <TextInputField
+            label="Password"
+            value=""
+            type="password"
+            required={true}
+            error="Password must be at least 8 characters long"
+            placeholder="Enter a secure password"
+          />
+        }
+      />
     </Box>
-  ),
+  )
 };
 
-// === COLUMN LAYOUT TESTS ===
-
-export const ColumnLayoutTests: StoryObj = {
-  name: 'GridLayout Features',
+export const SelectInputFieldShowcase: Story = {
+  name: 'SelectInputField - Dropdown Selection',
   render: () => (
-    <Box sx={{ p: 2 }}>
-      <Typography variant="h6" gutterBottom>Auto GridCell Distribution</Typography>
-      <Box sx={{ mb: 4 }}>
-        <Typography variant="subtitle2" gutterBottom>columns=2</Typography>
-        <GridLayout columns={2} spacing="small">
-          <TextField label="Auto GridCell 1" fullWidth />
-          <TextField label="Auto GridCell 2" fullWidth />
-          <Button variant="outlined" fullWidth>Auto Button 1</Button>
-          <Button variant="contained" fullWidth>Auto Button 2</Button>
-        </GridLayout>
-      </Box>
-
-      <Box sx={{ mb: 4 }}>
-        <Typography variant="subtitle2" gutterBottom>columns=3</Typography>
-        <GridLayout columns={3} spacing="medium">
-          <TextField label="Third 1" fullWidth />
-          <TextField label="Third 2" fullWidth />
-          <TextField label="Third 3" fullWidth />
-          <Button variant="outlined">Button 1</Button>
-          <Button variant="contained">Button 2</Button>
-          <Button variant="text">Button 3</Button>
-        </GridLayout>
-      </Box>
-
-      <Typography variant="h6" gutterBottom>Equal Height Columns</Typography>
-      <GridLayout columns={3} spacing="medium" equalHeight>
-        <Paper sx={{ p: 2, background: '#ffebee' }}>
-          <Typography>Short Content</Typography>
-        </Paper>
-        <Paper sx={{ p: 2, background: '#e8f5e8' }}>
-          <Typography>Medium length content that spans multiple lines to show height equalization working properly.</Typography>
-        </Paper>
-        <Paper sx={{ p: 2, background: '#e3f2fd' }}>
-          <Typography>Very long content that demonstrates the equal height feature by having much more text than the other columns, forcing all columns to match this height.</Typography>
-        </Paper>
-      </GridLayout>
-    </Box>
-  ),
-};
+    <Box sx={{ p: 4 }}>
+      <Typography variant="h4" gutterBottom>
+        SelectInputField Serialization Examples
+      </Typography>
+      
+      <SerializationDemo
+        title="Basic Country Selection"
+        component={
+          <SelectInputField
+            label="Country"
+            value="us"
+            placeholder="Select your country"
+            options={[
+              { value: 'us', label: 'United States' },
+              { value: 'ca', label: 'Canada' },
+              { value: 'uk', label: 'United Kingdom' },
+              { value: 'de', label: 'Germany' },
+              { value: 'fr', label: 'France' }
+            ]}
+            required={true}
+          />
+        }
+      />
 
-// === MIXED COMPONENT TESTS ===
+      <SerializationDemo
+        title="Priority Level with Disabled Options"
+        component={
+          <SelectInputField
+            label="Priority Level"
+            value="high"
+            options={[
+              { value: 'low', label: 'Low Priority', disabled: false },
+              { value: 'medium', label: 'Medium Priority', disabled: false },
+              { value: 'high', label: 'High Priority', disabled: false },
+              { value: 'critical', label: 'Critical Priority', disabled: true }
+            ]}
+            helperText="Critical priority requires special permissions"
+          />
+        }
+      />
 
-export const MixedComponents: StoryObj = {
-  name: 'Mixed Component Integration',
-  render: () => (
-    <Box sx={{ p: 2 }}>
-      <Typography variant="h6" gutterBottom>QwickApp + Regular Components</Typography>
-      <GridLayout spacing="medium">
-        <TextField
-          label="QwickApp TextField"
-          span={6}
-          fullWidth
-          background="#f5f5f5"
-          padding="medium"
-        />
-        <GridCell span={6} background="#e1f5fe" padding="medium">
-          <Typography variant="body2">Regular GridCell with base props</Typography>
-          <Box sx={{ mt: 1 }}>
-            <TextField label="Nested TextField" size="small" fullWidth />
-          </Box>
-        </GridCell>
-        <Button
-          span={4}
-          variant="contained"
-          color="primary"
-          padding="small"
-        >
-          QwickApp Button
-        </Button>
-        <GridCell span={4} padding="medium">
-          <Button variant="outlined" fullWidth>Regular MUI Button</Button>
-        </GridCell>
-        <GridCell span={4} background="linear-gradient(45deg, #673ab7, #9c27b0)" padding="medium">
-          <Typography sx={{ color: 'white', textAlign: 'center' }}>
-            Custom Content
-          </Typography>
-        </GridCell>
-      </GridLayout>
+      <SerializationDemo
+        title="Numeric Values - Age Range"
+        component={
+          <SelectInputField
+            label="Age Range"
+            value={25}
+            options={[
+              { value: 18, label: '18-24 years' },
+              { value: 25, label: '25-34 years' },
+              { value: 35, label: '35-44 years' },
+              { value: 45, label: '45+ years' }
+            ]}
+          />
+        }
+      />
     </Box>
-  ),
+  )
 };
 
-// === ERROR & EDGE CASES ===
+export const CompleteFormExample: Story = {
+  name: 'Complete Form - All Components Together',
+  render: () => {
+    const [formData, setFormData] = useState({
+      name: '',
+      email: '',
+      country: '',
+      description: '',
+      interests: ['Travel', 'Technology'],
+      notifications: true,
+      newsletter: false
+    });
 
-export const EdgeCases: StoryObj = {
-  name: 'Edge Cases & Error Handling',
-  render: () => (
-    <Box sx={{ p: 2 }}>
-      <Typography variant="h6" gutterBottom>Invalid Values (Check Console)</Typography>
-      <Box sx={{ mb: 4 }}>
-        <Typography variant="subtitle2" color="text.secondary" gutterBottom>
-          These should show warnings in console but still render:
-        </Typography>
-        <GridLayout spacing="medium">
-          <TextField
-            label="Invalid width"
-            width="invalid-value"
-            span={6}
-            fullWidth
-            background="#ffe0e0"
+    const completeForm = (
+      <FormBlock
+        title="User Registration"
+        description="Create your account and personalize your experience"
+        status="info"
+        message="Please fill out all required fields to complete registration"
+        maxWidth="md"
+        background="gradient"
+      >
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, p: 3 }}>
+          <TextInputField
+            label="Full Name"
+            value={formData.name}
+            placeholder="Enter your full name"
+            required={true}
           />
-          <TextField
-            label="Invalid spacing"
-            padding="not-a-size"
-            span={6}
-            fullWidth
-            background="#ffe0e0"
+          
+          <TextInputField
+            label="Email Address"
+            value={formData.email}
+            type="email"
+            placeholder="your@email.com"
+            required={true}
+            helperText="We'll use this to send you important updates"
           />
-        </GridLayout>
-      </Box>
+          
+          <SelectInputField
+            label="Country"
+            value={formData.country}
+            placeholder="Select your country"
+            options={[
+              { value: 'us', label: 'United States' },
+              { value: 'ca', label: 'Canada' },
+              { value: 'uk', label: 'United Kingdom' },
+              { value: 'de', label: 'Germany' },
+              { value: 'fr', label: 'France' }
+            ]}
+            required={true}
+          />
+          
+          <HtmlInputField
+            label="About Yourself"
+            value={formData.description}
+            placeholder="Tell us about yourself (HTML formatting supported)"
+            rows={4}
+            multiline={true}
+          />
+          
+          <ChoiceInputField
+            label="Interests"
+            options={formData.interests}
+            optionLabelPrefix="Interest"
+            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}
+            helperText="Get weekly newsletters with tips and updates"
+            color="secondary"
+          />
+        </Box>
+      </FormBlock>
+    );
 
-      <Typography variant="h6" gutterBottom>Extreme Values</Typography>
-      <GridLayout spacing="x-large">
-        <TextField
-          label="Zero dimensions"
-          width={0}
-          height={0}
-          span={4}
-          background="#f0f0f0"
-        />
-        <TextField
-          label="Large padding"
-          padding="50px"
-          span={4}
-          background="#f0f0f0"
+    return (
+      <Box sx={{ p: 4 }}>
+        <Typography variant="h4" gutterBottom>
+          Complete Form Example - All Components Working Together
+        </Typography>
+        
+        <Typography variant="body1" paragraph color="text.secondary">
+          This example demonstrates all form components working together in a complete registration form.
+          The entire form structure can be serialized and reconstructed using the ComponentTransformer.
+        </Typography>
+        
+        <SerializationDemo
+          title="Complete User Registration Form"
+          component={completeForm}
         />
-        <Button
-          span={4}
-          width="1000px"
-          height="100px"
-          variant="outlined"
-        >
-          Oversized Button
-        </Button>
-      </GridLayout>
-    </Box>
-  ),
+      </Box>
+    );
+  }
 };