@qwickapps/react-framework 1.3.4 → 1.4.0

package/src/stories/HtmlInputField.stories.tsx

@@ -13,98 +13,98 @@ import QwickApp from '../components/QwickApp';
 
 // Sample HTML input field data for different use cases
 const sampleCmsData = {
-  'htmlInputFields': {
-    'blog-content': { 
-      label: 'Blog Post Content', 
-      placeholder: 'Write your blog post content with HTML formatting...',
-      required: true,
-      multiline: true,
-      rows: 6,
-      value: '<p>Welcome to our <b>amazing</b> blog! Here you can share your <i>thoughts</i> and <u>experiences</u>.</p>'
-    },
-    'product-description': { 
-      label: 'Product Description', 
-      placeholder: 'Describe your product with rich formatting...',
-      required: true,
-      multiline: true,
-      rows: 4,
-      value: '<p>This <b>premium product</b> features:</p><br/>• Advanced <code>technology</code><br/>• <i>Elegant</i> design<br/>• <u>Lifetime warranty</u>'
-    },
-    'announcement-banner': { 
-      label: 'Site Announcement', 
-      placeholder: 'Create an announcement with HTML styling...',
-      multiline: false,
-      value: '🎉 <b>New Feature Launch!</b> Experience our <i>enhanced</i> <code>user interface</code>'
-    },
-    'email-signature': { 
-      label: 'Email Signature', 
-      placeholder: 'Create your HTML email signature...',
-      multiline: true,
-      rows: 3,
-      value: '<b>John Doe</b><br/><i>Senior Developer</i><br/>📧 john@example.com | 📱 +1-555-0123'
-    },
-    'newsletter-intro': { 
-      label: 'Newsletter Introduction', 
-      placeholder: 'Write the newsletter intro with formatting...',
-      required: true,
-      multiline: true,
-      rows: 4,
-      value: '<p>Hello <b>subscribers</b>! Welcome to our <i>monthly newsletter</i>.</p><p>This month we are excited to share <u>exciting updates</u> and <code>new features</code>.</p>'
-    },
-    'testimonial-quote': { 
-      label: 'Customer Testimonial', 
-      placeholder: 'Add customer testimonial with HTML styling...',
-      multiline: true,
-      rows: 3,
-      value: '<i>"This product has <b>transformed</b> our workflow. The <code>automation features</code> are incredible!"</i><br/><br/>- <b>Sarah Johnson</b>, CEO'
-    },
-    'feature-highlight': { 
-      label: 'Feature Highlight', 
-      placeholder: 'Highlight key features with HTML...',
-      multiline: true,
-      rows: 5,
-      value: '<p><b>🚀 Key Features:</b></p><p>• <u>Real-time</u> collaboration<br/>• <code>API integration</code><br/>• <i>Advanced</i> analytics<br/>• <b>24/7</b> support</p>'
-    },
-    'code-snippet': { 
-      label: 'Code Documentation', 
-      placeholder: 'Document code with HTML formatting...',
-      multiline: true,
-      rows: 4,
-      value: '<p>Use the <code>useState</code> hook for <b>state management</b>:</p><br/><code>const [count, setCount] = useState(0);</code><br/><br/><i>Remember to import from React!</i>'
-    },
-    'event-details': { 
-      label: 'Event Details', 
-      placeholder: 'Add event information with styling...',
-      multiline: true,
-      rows: 5,
-      value: '<b>🎪 Annual Tech Conference 2025</b><br/><br/>📅 <i>March 15-17, 2025</i><br/>📍 <u>San Francisco Convention Center</u><br/>🎟️ <code>Early bird tickets available</code>'
-    },
-    'basic-html': { 
-      label: 'Basic HTML Content', 
-      placeholder: 'Enter HTML content...',
-      multiline: true,
-      rows: 4
-    },
-    'disabled-field': { 
-      label: 'Read-only Content', 
-      value: 'This content is <b>read-only</b> and <i>cannot be edited</i>.',
-      disabled: true,
-      multiline: true,
-      rows: 2
-    }
-  }
+ 'htmlInputFields': {
+ 'blog-content': { 
+ label: 'Blog Post Content', 
+ placeholder: 'Write your blog post content with HTML formatting...',
+ required: true,
+ multiline: true,
+ rows: 6,
+ value: '<p>Welcome to our <b>amazing</b> blog! Here you can share your <i>thoughts</i> and <u>experiences</u>.</p>'
+ },
+ 'product-description': { 
+ label: 'Product Description', 
+ placeholder: 'Describe your product with rich formatting...',
+ required: true,
+ multiline: true,
+ rows: 4,
+ value: '<p>This <b>premium product</b> features:</p><br/>• Advanced <code>technology</code><br/>• <i>Elegant</i> design<br/>• <u>Lifetime warranty</u>'
+ },
+ 'announcement-banner': { 
+ label: 'Site Announcement', 
+ placeholder: 'Create an announcement with HTML styling...',
+ multiline: false,
+ value: ' <b>New Feature Launch!</b> Experience our <i>enhanced</i> <code>user interface</code>'
+ },
+ 'email-signature': { 
+ label: 'Email Signature', 
+ placeholder: 'Create your HTML email signature...',
+ multiline: true,
+ rows: 3,
+ value: '<b>John Doe</b><br/><i>Senior Developer</i><br/>📧 john@example.com | +1-555-0123'
+ },
+ 'newsletter-intro': { 
+ label: 'Newsletter Introduction', 
+ placeholder: 'Write the newsletter intro with formatting...',
+ required: true,
+ multiline: true,
+ rows: 4,
+ value: '<p>Hello <b>subscribers</b>! Welcome to our <i>monthly newsletter</i>.</p><p>This month we are excited to share <u>exciting updates</u> and <code>new features</code>.</p>'
+ },
+ 'testimonial-quote': { 
+ label: 'Customer Testimonial', 
+ placeholder: 'Add customer testimonial with HTML styling...',
+ multiline: true,
+ rows: 3,
+ value: '<i>"This product has <b>transformed</b> our workflow. The <code>automation features</code> are incredible!"</i><br/><br/>- <b>Sarah Johnson</b>, CEO'
+ },
+ 'feature-highlight': { 
+ label: 'Feature Highlight', 
+ placeholder: 'Highlight key features with HTML...',
+ multiline: true,
+ rows: 5,
+ value: '<p><b> Key Features:</b></p><p>• <u>Real-time</u> collaboration<br/>• <code>API integration</code><br/>• <i>Advanced</i> analytics<br/>• <b>24/7</b> support</p>'
+ },
+ 'code-snippet': { 
+ label: 'Code Documentation', 
+ placeholder: 'Document code with HTML formatting...',
+ multiline: true,
+ rows: 4,
+ value: '<p>Use the <code>useState</code> hook for <b>state management</b>:</p><br/><code>const [count, setCount] = useState(0);</code><br/><br/><i>Remember to import from React!</i>'
+ },
+ 'event-details': { 
+ label: 'Event Details', 
+ placeholder: 'Add event information with styling...',
+ multiline: true,
+ rows: 5,
+ value: '<b>🎪 Annual Tech Conference 2025</b><br/><br/>📅 <i>March 15-17, 2025</i><br/>📍 <u>San Francisco Convention Center</u><br/>🎟 <code>Early bird tickets available</code>'
+ },
+ 'basic-html': { 
+ label: 'Basic HTML Content', 
+ placeholder: 'Enter HTML content...',
+ multiline: true,
+ rows: 4
+ },
+ 'disabled-field': { 
+ label: 'Read-only Content', 
+ value: 'This content is <b>read-only</b> and <i>cannot be edited</i>.',
+ disabled: true,
+ multiline: true,
+ rows: 2
+ }
+ }
 };
 
 const dataProvider = new JsonDataProvider({ data: sampleCmsData });
 
 const meta = {
-  title: 'Forms/HtmlInputField',
-  component: HtmlInputField,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component: `HtmlInputField is a rich text editor component with HTML formatting capabilities and data binding support for content creation.
+ title: 'Forms/HtmlInputField',
+ component: HtmlInputField,
+ parameters: {
+ layout: 'padded',
+ docs: {
+ description: {
+ component: `HtmlInputField is a rich text editor component with HTML formatting capabilities and data binding support for content creation.
 
 **Key Features:**
 - **Rich Text Formatting**: Built-in toolbar with bold, italic, underline, and code formatting
@@ -123,10 +123,10 @@ const meta = {
 - Rich text comments and feedback
 - Documentation and help content
 - Any content requiring HTML formatting capabilities`,
-      },
-    },
-  },
-  tags: ['autodocs'],
+ },
+ },
+ },
+ tags: ['autodocs'],
 } satisfies Meta<typeof HtmlInputField>;
 
 export default meta;
@@ -134,425 +134,425 @@ type Story = StoryObj<typeof HtmlInputField>;
 
 // Traditional Usage Examples
 export const BasicHtmlEditor: Story = {
-  render: () => (
-    <QwickApp appId="html-input-basic" appName='Basic HTML Editor'>
-      <HtmlInputField 
-        label="Content Editor" 
-        placeholder="Enter HTML content..."
-        multiline={true}
-        rows={4}
-        onChange={(value) => console.log('HTML content changed:', value)}
-      />
-    </QwickApp>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Basic HTML input field with formatting toolbar and preview capabilities.',
-      },
-    },
-  },
+ render: () => (
+ <QwickApp appId="html-input-basic" appName='Basic HTML Editor'>
+ <HtmlInputField 
+ label="Content Editor" 
+ placeholder="Enter HTML content..."
+ multiline={true}
+ rows={4}
+ onChange={(value) => console.log('HTML content changed:', value)}
+ />
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Basic HTML input field with formatting toolbar and preview capabilities.',
+ },
+ },
+ },
 };
 
 export const BlogContentEditor: Story = {
-  render: () => (
-    <QwickApp appId="html-input-blog" appName='Blog Content Editor'>
-      <HtmlInputField 
-        label="Blog Post Content" 
-        placeholder="Write your blog post content with HTML formatting..."
-        required={true}
-        multiline={true}
-        rows={6}
-        value='<p>Welcome to our <b>amazing</b> blog! Here you can share your <i>thoughts</i> and <u>experiences</u>.</p>'
-        onChange={(value) => console.log('Blog content:', value)}
-      />
-    </QwickApp>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Rich HTML editor configured for blog post content creation with initial content.',
-      },
-    },
-  },
+ render: () => (
+ <QwickApp appId="html-input-blog" appName='Blog Content Editor'>
+ <HtmlInputField 
+ label="Blog Post Content" 
+ placeholder="Write your blog post content with HTML formatting..."
+ required={true}
+ multiline={true}
+ rows={6}
+ value='<p>Welcome to our <b>amazing</b> blog! Here you can share your <i>thoughts</i> and <u>experiences</u>.</p>'
+ onChange={(value) => console.log('Blog content:', value)}
+ />
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Rich HTML editor configured for blog post content creation with initial content.',
+ },
+ },
+ },
 };
 
 export const ProductDescription: Story = {
-  render: () => (
-    <QwickApp appId="html-input-product" appName='Product Description Editor'>
-      <HtmlInputField 
-        label="Product Description" 
-        placeholder="Describe your product with rich formatting..."
-        required={true}
-        multiline={true}
-        rows={4}
-        value='<p>This <b>premium product</b> features:</p><br/>• Advanced <code>technology</code><br/>• <i>Elegant</i> design<br/>• <u>Lifetime warranty</u>'
-        onChange={(value) => console.log('Product description:', value)}
-      />
-    </QwickApp>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'HTML editor for product descriptions with formatting for features and highlights.',
-      },
-    },
-  },
+ render: () => (
+ <QwickApp appId="html-input-product" appName='Product Description Editor'>
+ <HtmlInputField 
+ label="Product Description" 
+ placeholder="Describe your product with rich formatting..."
+ required={true}
+ multiline={true}
+ rows={4}
+ value='<p>This <b>premium product</b> features:</p><br/>• Advanced <code>technology</code><br/>• <i>Elegant</i> design<br/>• <u>Lifetime warranty</u>'
+ onChange={(value) => console.log('Product description:', value)}
+ />
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'HTML editor for product descriptions with formatting for features and highlights.',
+ },
+ },
+ },
 };
 
 export const SingleLineHtml: Story = {
-  render: () => (
-    <QwickApp appId="html-input-single" appName='Single Line HTML'>
-      <HtmlInputField 
-        label="Site Announcement" 
-        placeholder="Create an announcement with HTML styling..."
-        multiline={false}
-        value='🎉 <b>New Feature Launch!</b> Experience our <i>enhanced</i> <code>user interface</code>'
-        onChange={(value) => console.log('Announcement:', value)}
-      />
-    </QwickApp>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Single-line HTML input field for announcements and short formatted content.',
-      },
-    },
-  },
+ render: () => (
+ <QwickApp appId="html-input-single" appName='Single Line HTML'>
+ <HtmlInputField 
+ label="Site Announcement" 
+ placeholder="Create an announcement with HTML styling..."
+ multiline={false}
+ value=' <b>New Feature Launch!</b> Experience our <i>enhanced</i> <code>user interface</code>'
+ onChange={(value) => console.log('Announcement:', value)}
+ />
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Single-line HTML input field for announcements and short formatted content.',
+ },
+ },
+ },
 };
 
 export const FormattingShowcase: Story = {
-  render: () => (
-    <QwickApp appId="html-input-formatting" appName='HTML Formatting Showcase'>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-        <Alert severity="info">
-          <Typography variant="body2">
-            Use the toolbar buttons to format selected text, or click for insertion. Toggle preview mode to see the rendered output.
-          </Typography>
-        </Alert>
-        
-        <HtmlInputField 
-          label="Formatting Examples" 
-          placeholder="Try the formatting tools above..."
-          multiline={true}
-          rows={6}
-          value='<p>Examples of <b>formatting</b>:</p><br/>• <b>Bold text</b> for emphasis<br/>• <i>Italic text</i> for style<br/>• <u>Underlined text</u> for highlighting<br/>• <code>Code snippets</code> for technical content<br/><br/><p>Mix and match: <b><i>Bold italic</i></b> and <u><code>underlined code</code></u>!</p>'
-          onChange={(value) => console.log('Formatted content:', value)}
-        />
-      </Box>
-    </QwickApp>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Showcase of HTML formatting capabilities with examples of different text styles.',
-      },
-    },
-  },
+ render: () => (
+ <QwickApp appId="html-input-formatting" appName='HTML Formatting Showcase'>
+ <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+ <Alert severity="info">
+ <Typography variant="body2">
+ Use the toolbar buttons to format selected text, or click for insertion. Toggle preview mode to see the rendered output.
+ </Typography>
+ </Alert>
+ 
+ <HtmlInputField 
+ label="Formatting Examples" 
+ placeholder="Try the formatting tools above..."
+ multiline={true}
+ rows={6}
+ value='<p>Examples of <b>formatting</b>:</p><br/>• <b>Bold text</b> for emphasis<br/>• <i>Italic text</i> for style<br/>• <u>Underlined text</u> for highlighting<br/>• <code>Code snippets</code> for technical content<br/><br/><p>Mix and match: <b><i>Bold italic</i></b> and <u><code>underlined code</code></u>!</p>'
+ onChange={(value) => console.log('Formatted content:', value)}
+ />
+ </Box>
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Showcase of HTML formatting capabilities with examples of different text styles.',
+ },
+ },
+ },
 };
 
 export const States: Story = {
-  render: () => (
-    <QwickApp appId="html-input-states" appName='HTML Input States'>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 800 }}>
-        <HtmlInputField 
-          label="Normal State" 
-          placeholder="Enter HTML content..."
-          multiline={true}
-          rows={3}
-          onChange={(value) => console.log('Normal:', value)}
-        />
-        
-        <HtmlInputField 
-          label="Required Field" 
-          placeholder="This field is required"
-          required={true}
-          multiline={true}
-          rows={3}
-          onChange={(value) => console.log('Required:', value)}
-        />
-        
-        <HtmlInputField 
-          label="Pre-filled Content" 
-          value="<p>This field has <b>pre-filled</b> <i>content</i> with <code>formatting</code>.</p>"
-          multiline={true}
-          rows={3}
-          onChange={(value) => console.log('Pre-filled:', value)}
-        />
-        
-        <HtmlInputField 
-          label="Disabled Field" 
-          value="This content is <b>read-only</b> and <i>cannot be edited</i>."
-          disabled={true}
-          multiline={true}
-          rows={2}
-        />
-      </Box>
-    </QwickApp>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Different HTML input field states including normal, required, pre-filled, and disabled.',
-      },
-    },
-  },
+ render: () => (
+ <QwickApp appId="html-input-states" appName='HTML Input States'>
+ <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 800 }}>
+ <HtmlInputField 
+ label="Normal State" 
+ placeholder="Enter HTML content..."
+ multiline={true}
+ rows={3}
+ onChange={(value) => console.log('Normal:', value)}
+ />
+ 
+ <HtmlInputField 
+ label="Required Field" 
+ placeholder="This field is required"
+ required={true}
+ multiline={true}
+ rows={3}
+ onChange={(value) => console.log('Required:', value)}
+ />
+ 
+ <HtmlInputField 
+ label="Pre-filled Content" 
+ value="<p>This field has <b>pre-filled</b> <i>content</i> with <code>formatting</code>.</p>"
+ multiline={true}
+ rows={3}
+ onChange={(value) => console.log('Pre-filled:', value)}
+ />
+ 
+ <HtmlInputField 
+ label="Disabled Field" 
+ value="This content is <b>read-only</b> and <i>cannot be edited</i>."
+ disabled={true}
+ multiline={true}
+ rows={2}
+ />
+ </Box>
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Different HTML input field states including normal, required, pre-filled, and disabled.',
+ },
+ },
+ },
 };
 
 // Data Binding Examples
 export const DataBindingBasic: Story = {
-  render: () => (
-    <QwickApp appId="html-input-data-binding" appName='HtmlInputField Data Binding' dataSource={{ dataProvider }}>
-      <Box>
-        
-        <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
-          <Typography variant="h5" gutterBottom>📊 Data-Driven HTML Editor</Typography>
-          <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
-            HtmlInputField components can be completely driven by CMS data, loading content and configuration from your data source.
-          </Typography>
-          
-          <Code title="Usage" language="tsx">{`<HtmlInputField dataSource="htmlInputFields.blog-content" />`}</Code>
-          
-          <Code title="Data Structure" language="json">{JSON.stringify(sampleCmsData.htmlInputFields['blog-content'], null, 2)}</Code>
-        </Box>
+ render: () => (
+ <QwickApp appId="html-input-data-binding" appName='HtmlInputField Data Binding' dataSource={{ dataProvider }}>
+ <Box>
+ 
+ <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
+ <Typography variant="h5" gutterBottom> Data-Driven HTML Editor</Typography>
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
+ HtmlInputField components can be completely driven by CMS data, loading content and configuration from your data source.
+ </Typography>
+ 
+ <Code title="Usage" language="tsx">{`<HtmlInputField dataSource="htmlInputFields.blog-content" />`}</Code>
+ 
+ <Code title="Data Structure" language="json">{JSON.stringify(sampleCmsData.htmlInputFields['blog-content'], null, 2)}</Code>
+ </Box>
 
-        <HtmlInputField dataSource="htmlInputFields.blog-content" />
-        
-      </Box>
-    </QwickApp>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'HtmlInputField with data binding - content and configuration resolved from CMS data through dataSource.',
-      },
-    },
-  },
+ <HtmlInputField dataSource="htmlInputFields.blog-content" />
+ 
+ </Box>
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'HtmlInputField with data binding - content and configuration resolved from CMS data through dataSource.',
+ },
+ },
+ },
 };
 
 export const DataBindingAdvanced: Story = {
-  render: () => (
-    <QwickApp appId="html-input-data-advanced" appName='Advanced HtmlInputField Data Binding' dataSource={{ dataProvider }}>
-      <Box>
-        
-        <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
-          <Typography variant="h5" gutterBottom>🎯 Multiple Content Types</Typography>
-          <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
-            Different HtmlInputField instances can load different content types and configurations from separate data sources.
-          </Typography>
-        </Box>
+ render: () => (
+ <QwickApp appId="html-input-data-advanced" appName='Advanced HtmlInputField Data Binding' dataSource={{ dataProvider }}>
+ <Box>
+ 
+ <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
+ <Typography variant="h5" gutterBottom> Multiple Content Types</Typography>
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
+ Different HtmlInputField instances can load different content types and configurations from separate data sources.
+ </Typography>
+ </Box>
 
-        {/* Content Creation */}
-        <Box sx={{ mb: 4 }}>
-          <Typography variant="h4" gutterBottom>Content Creation</Typography>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 800 }}>
-            <HtmlInputField dataSource="htmlInputFields.blog-content" />
-            <HtmlInputField dataSource="htmlInputFields.newsletter-intro" />
-          </Box>
-        </Box>
+ {/* Content Creation */}
+ <Box sx={{ mb: 4 }}>
+ <Typography variant="h4" gutterBottom>Content Creation</Typography>
+ <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 800 }}>
+ <HtmlInputField dataSource="htmlInputFields.blog-content" />
+ <HtmlInputField dataSource="htmlInputFields.newsletter-intro" />
+ </Box>
+ </Box>
 
-        {/* Marketing Content */}
-        <Box sx={{ mb: 4 }}>
-          <Typography variant="h4" gutterBottom>Marketing & Sales</Typography>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 800 }}>
-            <HtmlInputField dataSource="htmlInputFields.product-description" />
-            <HtmlInputField dataSource="htmlInputFields.testimonial-quote" />
-            <HtmlInputField dataSource="htmlInputFields.feature-highlight" />
-          </Box>
-        </Box>
+ {/* Marketing Content */}
+ <Box sx={{ mb: 4 }}>
+ <Typography variant="h4" gutterBottom>Marketing & Sales</Typography>
+ <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 800 }}>
+ <HtmlInputField dataSource="htmlInputFields.product-description" />
+ <HtmlInputField dataSource="htmlInputFields.testimonial-quote" />
+ <HtmlInputField dataSource="htmlInputFields.feature-highlight" />
+ </Box>
+ </Box>
 
-        {/* Communication */}
-        <Box sx={{ mb: 4 }}>
-          <Typography variant="h4" gutterBottom>Communication</Typography>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 800 }}>
-            <HtmlInputField dataSource="htmlInputFields.email-signature" />
-            <HtmlInputField dataSource="htmlInputFields.announcement-banner" />
-          </Box>
-        </Box>
-        
-      </Box>
-    </QwickApp>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Advanced data binding with multiple HTML content types showcasing different configurations and use cases.',
-      },
-    },
-  },
+ {/* Communication */}
+ <Box sx={{ mb: 4 }}>
+ <Typography variant="h4" gutterBottom>Communication</Typography>
+ <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: 800 }}>
+ <HtmlInputField dataSource="htmlInputFields.email-signature" />
+ <HtmlInputField dataSource="htmlInputFields.announcement-banner" />
+ </Box>
+ </Box>
+ 
+ </Box>
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Advanced data binding with multiple HTML content types showcasing different configurations and use cases.',
+ },
+ },
+ },
 };
 
 export const DataBindingWithFallback: Story = {
-  render: () => (
-    <QwickApp appId="html-input-fallback" appName='HtmlInputField Data Binding with Fallback' dataSource={{ dataProvider }}>
-      <Box>
-        
-        <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
-          <Typography variant="h5" gutterBottom>🛡️ Fallback Support</Typography>
-          <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
-            HtmlInputField components gracefully handle missing data sources with fallback configurations.
-          </Typography>
-          
-          <Code title="Fallback Usage" language="tsx">{`<HtmlInputField 
-  dataSource="nonexistent.field" 
-  label="Fallback Editor"
-  placeholder="This is fallback content"
-  multiline={true}
-  rows={4}
+ render: () => (
+ <QwickApp appId="html-input-fallback" appName='HtmlInputField Data Binding with Fallback' dataSource={{ dataProvider }}>
+ <Box>
+ 
+ <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
+ <Typography variant="h5" gutterBottom> Fallback Support</Typography>
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
+ HtmlInputField components gracefully handle missing data sources with fallback configurations.
+ </Typography>
+ 
+ <Code title="Fallback Usage" language="tsx">{`<HtmlInputField 
+ dataSource="nonexistent.field" 
+ label="Fallback Editor"
+ placeholder="This is fallback content"
+ multiline={true}
+ rows={4}
 />`}</Code>
-        </Box>
+ </Box>
 
-        <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
-          <Box>
-            <Typography variant="h6" gutterBottom>Missing Data Source (Fallback)</Typography>
-            <HtmlInputField 
-              dataSource="nonexistent.field"
-              label="Fallback Editor"
-              placeholder="This is fallback content..."
-              multiline={true}
-              rows={4}
-            />
-          </Box>
-          <Box>
-            <Typography variant="h6" gutterBottom>Valid Data Source</Typography>
-            <HtmlInputField dataSource="htmlInputFields.blog-content" />
-          </Box>
-        </Box>
-        
-      </Box>
-    </QwickApp>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'HtmlInputField with fallback configuration when dataSource is missing or unavailable.',
-      },
-    },
-  },
+ <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
+ <Box>
+ <Typography variant="h6" gutterBottom>Missing Data Source (Fallback)</Typography>
+ <HtmlInputField 
+ dataSource="nonexistent.field"
+ label="Fallback Editor"
+ placeholder="This is fallback content..."
+ multiline={true}
+ rows={4}
+ />
+ </Box>
+ <Box>
+ <Typography variant="h6" gutterBottom>Valid Data Source</Typography>
+ <HtmlInputField dataSource="htmlInputFields.blog-content" />
+ </Box>
+ </Box>
+ 
+ </Box>
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'HtmlInputField with fallback configuration when dataSource is missing or unavailable.',
+ },
+ },
+ },
 };
 
 export const RealWorldExample: Story = {
-  render: () => (
-    <QwickApp appId="html-input-real-world" appName='Real World HtmlInputField Example' dataSource={{ dataProvider }}>
-      <Box>
-        
-        {/* Content Management System */}
-        <Box sx={{ mb: 6, p: 4, backgroundColor: 'background.paper', borderRadius: 2 }}>
-          <Typography variant="h3" gutterBottom>Content Management</Typography>
-          <Typography variant="body1" sx={{ mb: 4, opacity: 0.8 }}>
-            Create and manage rich content with HTML formatting capabilities
-          </Typography>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4, maxWidth: 900 }}>
-            <HtmlInputField dataSource="htmlInputFields.blog-content" />
-            <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 3 }}>
-              <HtmlInputField dataSource="htmlInputFields.product-description" />
-              <HtmlInputField dataSource="htmlInputFields.announcement-banner" />
-            </Box>
-          </Box>
-        </Box>
-        
-        {/* Documentation Platform */}
-        <Box sx={{ mb: 6, p: 4, backgroundColor: 'primary.main', color: 'primary.contrastText', borderRadius: 2 }}>
-          <Typography variant="h3" gutterBottom>Documentation & Support</Typography>
-          <Typography variant="body1" sx={{ mb: 4, opacity: 0.9 }}>
-            Create technical documentation and support content with code formatting
-          </Typography>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4, maxWidth: 900 }}>
-            <HtmlInputField dataSource="htmlInputFields.code-snippet" />
-            <HtmlInputField dataSource="htmlInputFields.feature-highlight" />
-          </Box>
-        </Box>
-        
-        {/* Event Management */}
-        <Box sx={{ mb: 6, p: 4, backgroundColor: 'background.paper', borderRadius: 2 }}>
-          <Typography variant="h3" gutterBottom>Event & Communication</Typography>
-          <Typography variant="body1" sx={{ mb: 4, opacity: 0.8 }}>
-            Manage event details, newsletters, and customer communications
-          </Typography>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4, maxWidth: 900 }}>
-            <HtmlInputField dataSource="htmlInputFields.event-details" />
-            <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 3 }}>
-              <HtmlInputField dataSource="htmlInputFields.newsletter-intro" />
-              <HtmlInputField dataSource="htmlInputFields.email-signature" />
-            </Box>
-          </Box>
-        </Box>
-        
-        {/* Customer Testimonials */}
-        <Box sx={{ p: 4, backgroundColor: 'secondary.main', color: 'secondary.contrastText', borderRadius: 2 }}>
-          <Typography variant="h3" gutterBottom>Customer Success</Typography>
-          <Typography variant="body1" sx={{ mb: 4, opacity: 0.9 }}>
-            Showcase customer testimonials and success stories
-          </Typography>
-          <Box sx={{ maxWidth: 700 }}>
-            <HtmlInputField dataSource="htmlInputFields.testimonial-quote" />
-          </Box>
-        </Box>
-        
-      </Box>
-    </QwickApp>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Real-world example showing HtmlInputField in various contexts: content management, documentation, events, and testimonials.',
-      },
-    },
-  },
+ render: () => (
+ <QwickApp appId="html-input-real-world" appName='Real World HtmlInputField Example' dataSource={{ dataProvider }}>
+ <Box>
+ 
+ {/* Content Management System */}
+ <Box sx={{ mb: 6, p: 4, backgroundColor: 'background.paper', borderRadius: 2 }}>
+ <Typography variant="h3" gutterBottom>Content Management</Typography>
+ <Typography variant="body1" sx={{ mb: 4, opacity: 0.8 }}>
+ Create and manage rich content with HTML formatting capabilities
+ </Typography>
+ <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4, maxWidth: 900 }}>
+ <HtmlInputField dataSource="htmlInputFields.blog-content" />
+ <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 3 }}>
+ <HtmlInputField dataSource="htmlInputFields.product-description" />
+ <HtmlInputField dataSource="htmlInputFields.announcement-banner" />
+ </Box>
+ </Box>
+ </Box>
+ 
+ {/* Documentation Platform */}
+ <Box sx={{ mb: 6, p: 4, backgroundColor: 'primary.main', color: 'primary.contrastText', borderRadius: 2 }}>
+ <Typography variant="h3" gutterBottom>Documentation & Support</Typography>
+ <Typography variant="body1" sx={{ mb: 4, opacity: 0.9 }}>
+ Create technical documentation and support content with code formatting
+ </Typography>
+ <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4, maxWidth: 900 }}>
+ <HtmlInputField dataSource="htmlInputFields.code-snippet" />
+ <HtmlInputField dataSource="htmlInputFields.feature-highlight" />
+ </Box>
+ </Box>
+ 
+ {/* Event Management */}
+ <Box sx={{ mb: 6, p: 4, backgroundColor: 'background.paper', borderRadius: 2 }}>
+ <Typography variant="h3" gutterBottom>Event & Communication</Typography>
+ <Typography variant="body1" sx={{ mb: 4, opacity: 0.8 }}>
+ Manage event details, newsletters, and customer communications
+ </Typography>
+ <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4, maxWidth: 900 }}>
+ <HtmlInputField dataSource="htmlInputFields.event-details" />
+ <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' }, gap: 3 }}>
+ <HtmlInputField dataSource="htmlInputFields.newsletter-intro" />
+ <HtmlInputField dataSource="htmlInputFields.email-signature" />
+ </Box>
+ </Box>
+ </Box>
+ 
+ {/* Customer Testimonials */}
+ <Box sx={{ p: 4, backgroundColor: 'secondary.main', color: 'secondary.contrastText', borderRadius: 2 }}>
+ <Typography variant="h3" gutterBottom>Customer Success</Typography>
+ <Typography variant="body1" sx={{ mb: 4, opacity: 0.9 }}>
+ Showcase customer testimonials and success stories
+ </Typography>
+ <Box sx={{ maxWidth: 700 }}>
+ <HtmlInputField dataSource="htmlInputFields.testimonial-quote" />
+ </Box>
+ </Box>
+ 
+ </Box>
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Real-world example showing HtmlInputField in various contexts: content management, documentation, events, and testimonials.',
+ },
+ },
+ },
 };
 
 export const EditorFeatureShowcase: Story = {
-  render: () => (
-    <QwickApp appId="html-input-features" appName='HTML Editor Features Showcase' dataSource={{ dataProvider }}>
-      <Box>
-        
-        <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
-          <Typography variant="h5" gutterBottom>🎨 Editor Features</Typography>
-          <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
-            Comprehensive showcase of HtmlInputField features including formatting, preview, and various content types.
-          </Typography>
-        </Box>
+ render: () => (
+ <QwickApp appId="html-input-features" appName='HTML Editor Features Showcase' dataSource={{ dataProvider }}>
+ <Box>
+ 
+ <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
+ <Typography variant="h5" gutterBottom> Editor Features</Typography>
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
+ Comprehensive showcase of HtmlInputField features including formatting, preview, and various content types.
+ </Typography>
+ </Box>
 
-        <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: 4 }}>
-          <Box>
-            <Typography variant="h6" gutterBottom>Rich Blog Content</Typography>
-            <HtmlInputField dataSource="htmlInputFields.blog-content" />
-          </Box>
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Product Marketing</Typography>
-            <HtmlInputField dataSource="htmlInputFields.product-description" />
-          </Box>
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Code Documentation</Typography>
-            <HtmlInputField dataSource="htmlInputFields.code-snippet" />
-          </Box>
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Event Information</Typography>
-            <HtmlInputField dataSource="htmlInputFields.event-details" />
-          </Box>
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Email Templates</Typography>
-            <HtmlInputField dataSource="htmlInputFields.email-signature" />
-          </Box>
-          
-          <Box>
-            <Typography variant="h6" gutterBottom>Customer Feedback</Typography>
-            <HtmlInputField dataSource="htmlInputFields.testimonial-quote" />
-          </Box>
-        </Box>
-        
-      </Box>
-    </QwickApp>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Comprehensive showcase of HtmlInputField capabilities across different content types and use cases.',
-      },
-    },
-  },
+ <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: 4 }}>
+ <Box>
+ <Typography variant="h6" gutterBottom>Rich Blog Content</Typography>
+ <HtmlInputField dataSource="htmlInputFields.blog-content" />
+ </Box>
+ 
+ <Box>
+ <Typography variant="h6" gutterBottom>Product Marketing</Typography>
+ <HtmlInputField dataSource="htmlInputFields.product-description" />
+ </Box>
+ 
+ <Box>
+ <Typography variant="h6" gutterBottom>Code Documentation</Typography>
+ <HtmlInputField dataSource="htmlInputFields.code-snippet" />
+ </Box>
+ 
+ <Box>
+ <Typography variant="h6" gutterBottom>Event Information</Typography>
+ <HtmlInputField dataSource="htmlInputFields.event-details" />
+ </Box>
+ 
+ <Box>
+ <Typography variant="h6" gutterBottom>Email Templates</Typography>
+ <HtmlInputField dataSource="htmlInputFields.email-signature" />
+ </Box>
+ 
+ <Box>
+ <Typography variant="h6" gutterBottom>Customer Feedback</Typography>
+ <HtmlInputField dataSource="htmlInputFields.testimonial-quote" />
+ </Box>
+ </Box>
+ 
+ </Box>
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Comprehensive showcase of HtmlInputField capabilities across different content types and use cases.',
+ },
+ },
+ },
 };