@qwickapps/react-framework 1.4.1 → 1.4.3

package/src/stories/FormBlock.stories.tsx

@@ -8,6 +8,7 @@ import { Box, Link, Typography } from '@mui/material';
 import { JsonDataProvider } from '@qwickapps/schema';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button, Code, FormBlock, QwickApp, QwickAppsLogo, SelectInputField, TextInputField } from '../components';
+import { makeSerializationStory } from './_templates/SerializationTemplate';
 
 
 // Sample form block data for different use cases
@@ -831,4 +832,57 @@ export const RealWorldExample: Story = {
  },
  },
  },
+};
+
+/**
+ * SerializationDemo - FormBlock serialization using template
+ */
+export const SerializationDemo: Story = {
+  render: makeSerializationStory(() => (
+    <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"
+    >
+      <TextInputField
+        label="Full Name"
+        value="John Doe"
+        placeholder="Enter your full name"
+        required={true}
+      />
+      
+      <TextInputField
+        label="Email Address"
+        value="user@example.com"
+        type="email"
+        placeholder="your@email.com"
+        required={true}
+        helperText="We'll use this to send you important updates"
+      />
+      
+      <SelectInputField
+        label="Country"
+        value="us"
+        placeholder="Select your country"
+        options={[
+          { value: 'us', label: 'United States' },
+          { value: 'ca', label: 'Canada' },
+          { value: 'uk', label: 'United Kingdom' }
+        ]}
+        required={true}
+      />
+      
+      <Button label="Create Account" variant="primary" />
+    </FormBlock>
+  )),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows FormBlock serialization with nested form components using the standardized makeSerializationStory template. Demonstrates react-children strategy for form container components.',
+      },
+    },
+  },
 };

package/src/stories/FormComponents.stories.tsx

@@ -18,6 +18,7 @@ import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Box, Typography, Paper, Button, Alert } from '@mui/material';
 import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
+import { Code } from '../components/blocks';
 
 // Import form components
 import { TextInputField } from '../components/input/TextInputField';
@@ -132,19 +133,13 @@ const SerializationDemo: React.FC<{
           <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>
+          <Code 
+            language="json"
+            content={JSON.stringify(JSON.parse(serializedData), null, 2)}
+            showCopy={true}
+            showLineNumbers={false}
+            sx={{ maxHeight: 200, overflow: 'auto' }}
+          />
         </Box>
       )}
 

package/src/stories/GridCell.stories.tsx

@@ -9,6 +9,7 @@ import { Button } from '../components/buttons/Button';
 import { Code } from '../components/blocks/Code';
 import { Image } from '../components/blocks/Image';
 import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
+import { makeSerializationStory } from './_templates/SerializationTemplate';
 import React from 'react';
 
 // Ensure components are registered for serialization
@@ -223,7 +224,6 @@ export const WithCodeBlock: Story = {
         language="typescript" 
         title="GridCell Usage" 
         showCopy={true}
-        theme="dark"
       >
 {`import { GridCell } from '@qwickapps/react-framework';
 
@@ -246,68 +246,7 @@ function ResponsiveCard() {
   ),
 };
 
-// Serialization examples
-export const SerializationDemo: Story = {
-  args: {
-    xs: 12,
-    md: 8,
-    lg: 6,
-    background: 'background.paper',
-    padding: 'large',
-    margin: 'medium',
-  },
-  render: (args) => {
-    const cellComponent = (
-      <GridCell {...args}>
-        <Text content="Serializable GridCell" variant="h4" />
-        <Text content="This entire cell and its contents can be serialized to JSON and perfectly reconstructed." variant="body1" />
-        <Button label="Interactive Element" variant="outlined" />
-        <Code language="json" title="Partial Serialized Structure" showCopy={false}>
-{`{
-  "tag": "GridCell",
-  "version": "1.0.0",
-  "data": {
-    "xs": 12,
-    "md": 8,
-    "lg": 6,
-    "background": "background.paper",
-    "padding": "large",
-    "margin": "medium",
-    "children": "[nested components...]"
-  }
-}`}
-        </Code>
-      </GridCell>
-    );
 
-    return (
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '16px' }}>
-        <div style={{ gridColumn: '1 / -1', marginBottom: '16px' }}>
-          <h3>Original Component:</h3>
-        </div>
-        {cellComponent}
-        
-        <div style={{ gridColumn: '1 / -1', marginTop: '24px' }}>
-          <h3>Round-trip Serialization Test:</h3>
-        </div>
-        {ComponentTransformer.deserialize(ComponentTransformer.serialize(cellComponent))}
-        
-        <div style={{ gridColumn: '1 / -1', marginTop: '24px' }}>
-          <div style={{ 
-            padding: '16px',
-            backgroundColor: '#e7f3ff',
-            borderRadius: '8px',
-            fontSize: '14px'
-          }}>
-            <strong>✓ Serialization Test Passed</strong>
-            <br />
-            Both cells above should be identical, demonstrating that the component can be perfectly serialized and deserialized.
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
 
 export const NestedSerializableComponents: Story = {
   args: {
@@ -407,11 +346,31 @@ export const ThemeIntegration: Story = {
   },
   render: (args) => (
     <GridCell {...args}>
-      <Text content="Theme-Aware Cell" variant="h4" color="primary.contrastText" />
-      <Text content="This cell uses theme colors for background and automatically adjusts text color for contrast." variant="body1" color="primary.contrastText" />
+      <Text content="Theme-Aware Cell" variant="h4" color="textPrimary" />
+      <Text content="This cell uses theme colors for background and automatically adjusts text color for contrast." variant="body1" color="textSecondary" />
       <div style={{ marginTop: '16px' }}>
         <Button label="Themed Button" variant="contained" />
       </div>
     </GridCell>
   ),
+};
+
+/**
+ * SerializationDemo - GridCell serialization using template
+ */
+export const SerializationDemo: Story = {
+  render: makeSerializationStory(() => (
+    <GridCell xs={12} sm={6} md={4} padding="large" background="#e3f2fd">
+      <Text content="Serializable GridCell" variant="h6" />
+      <Text content="This grid cell contains nested serializable components." variant="body1" />
+      <Button label="Action Button" variant="primary" />
+    </GridCell>
+  )),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows GridCell serialization with nested components using the standardized makeSerializationStory template. Demonstrates react-children strategy for layout components.',
+      },
+    },
+  },
 };

package/src/stories/GridLayout.stories.tsx

@@ -9,6 +9,7 @@ import { Text } from '../components/blocks/Text';
 import { Button } from '../components/buttons/Button';
 import { Code } from '../components/blocks/Code';
 import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
+import { makeSerializationStory } from './_templates/SerializationTemplate';
 import React from 'react';
 
 // Ensure components are registered for serialization
@@ -167,24 +168,18 @@ export const ComplexResponsive: Story = {
   ),
 };
 
-// Serialization examples
+// Serialization examples - using standardized template
 export const SerializationDemo: Story = {
-  args: {
-    columns: 2,
-    spacing: 'large',
-    height: '400px',
-  },
-  render: (args) => {
-    const gridComponent = (
-      <GridLayout {...args}>
-        <GridCell span={8} background="background.paper" padding="large">
-          <Text content="Serializable Content" variant="h3" />
-          <Text content="This entire grid layout can be serialized to JSON and recreated exactly." variant="body1" />
-          <Button label="Interactive Button" variant="outlined" />
-        </GridCell>
-        <GridCell span={4} background="grey.100" padding="medium">
-          <Text content="Code Example" variant="h5" />
-          <Code language="typescript" showCopy={true}>
+  render: makeSerializationStory(() => (
+    <GridLayout columns={2} spacing="large" height="400px">
+      <GridCell span={8} background="background.paper" padding="large">
+        <Text content="Serializable Content" variant="h3" />
+        <Text content="This entire grid layout can be serialized to JSON and recreated exactly." variant="body1" />
+        <Button label="Interactive Button" variant="outlined" />
+      </GridCell>
+      <GridCell span={4} background="grey.100" padding="medium">
+        <Text content="Code Example" variant="h5" />
+        <Code language="typescript" showCopy={true}>
 {`// Serialize the grid
 const serialized = ComponentTransformer
   .serialize(gridComponent);
@@ -192,36 +187,16 @@ const serialized = ComponentTransformer
 // Deserialize back to React
 const restored = ComponentTransformer
   .deserialize(serialized);`}
-          </Code>
-        </GridCell>
-      </GridLayout>
-    );
-
-    return (
-      <div>
-        <div style={{ marginBottom: '24px' }}>
-          <h3>Original Component:</h3>
-        </div>
-        {gridComponent}
-        <div style={{ marginTop: '24px', marginBottom: '16px' }}>
-          <h3>Serialized JSON (first 200 characters):</h3>
-          <pre style={{ 
-            backgroundColor: '#f5f5f5', 
-            padding: '12px', 
-            borderRadius: '4px', 
-            fontSize: '12px',
-            overflow: 'hidden',
-            maxHeight: '120px'
-          }}>
-            {ComponentTransformer.serialize(gridComponent).substring(0, 200)}...
-          </pre>
-        </div>
-        <div style={{ marginBottom: '16px' }}>
-          <h3>Deserialized Component:</h3>
-        </div>
-        {ComponentTransformer.deserialize(ComponentTransformer.serialize(gridComponent))}
-      </div>
-    );
+        </Code>
+      </GridCell>
+    </GridLayout>
+  )),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates GridLayout serialization with nested components using the standardized serialization template.',
+      },
+    },
   },
 };
 

package/src/stories/HeroBlock.stories.tsx

@@ -12,6 +12,7 @@ import { Code } from '../components/blocks';
 import HeroBlock from '../components/blocks/HeroBlock';
 import { DataProvider } from '../contexts/DataContext';
 import { ComponentTransformer } from '../schemas/transformers/ComponentTransformer';
+import { makeSerializationStory } from './_templates/SerializationTemplate';
 import React from 'react';
 
 // Sample CMS data for data binding stories
@@ -928,4 +929,31 @@ export const SerializationNestedActions: Story = {
  },
  },
  },
+};
+
+/**
+ * SerializationDemo - Modern HeroBlock serialization using template
+ */
+export const SerializationDemo: Story = {
+  render: makeSerializationStory(() => (
+    <HeroBlock 
+      title="Serializable HeroBlock"
+      subtitle="Modern factory-based component with standardized serialization"
+      backgroundGradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+      textAlign="center"
+      blockHeight="medium"
+      overlayOpacity={0.6}
+      actions={[
+        { label: 'Primary Action', variant: 'primary', buttonSize: 'large' },
+        { label: 'Secondary Action', variant: 'outlined', buttonSize: 'medium' }
+      ]}
+    />
+  )),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows modern HeroBlock serialization using the standardized makeSerializationStory template. Demonstrates react-children strategy for container components.',
+      },
+    },
+  },
 };

package/src/stories/HtmlInputField.stories.tsx

@@ -10,6 +10,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Code } from '../components/blocks';
 import HtmlInputField from '../components/input/HtmlInputField';
 import QwickApp from '../components/QwickApp';
+import { makeSerializationStory } from './_templates/SerializationTemplate';
 
 // Sample HTML input field data for different use cases
 const sampleCmsData = {
@@ -555,4 +556,25 @@ export const EditorFeatureShowcase: Story = {
  },
  },
  },
-};
+};
+
+// Serialization Demo
+export const SerializationDemo: Story = {
+  render: makeSerializationStory(() => (
+    <HtmlInputField
+      label="Serializable HTML Field"
+      placeholder="Enter HTML content..."
+      required={false}
+      rows={4}
+      value="<b>Bold text</b> and <i>italic text</i> with <code>code</code>"
+      helpText="This field supports HTML formatting and demonstrates serialization"
+    />
+  )),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates HtmlInputField serialization with HTML content and formatting preserved.',
+      },
+    },
+  },
+};