@qwickapps/react-framework 1.3.4 → 1.4.0

package/src/stories/Logo.stories.tsx

@@ -14,14 +14,16 @@ const meta = {
     layout: 'centered',
     docs: {
       description: {
-        component: `Logo component provides flexible brand identity display with dynamic theming and customization options.
+        component: `Logo component provides flexible brand identity display with dynamic theming, image support, and customization options.
 
 **Key Features:**
 - **Theme Integration**: Automatically adapts colors based on current theme and variant
 - **Multiple Sizes**: Five size variants from tiny to extra-large with consistent scaling
 - **Badge System**: Optional badges with customizable shapes, positions, and offsets
+- **Image Support**: Optional images with flexible positioning (start, end, top, bottom)
 - **Text Formatting**: Supports line breaks (\\n) and explicit spaces (\\s) for multi-line logos
 - **Variant Support**: Multiple visual variants including high-contrast and monochrome options
+- **Schema-based**: Uses LogoSchema for consistent data binding and validation
 - **Animation Ready**: Built-in support for CSS animations and transitions
 - **Responsive Design**: Scales appropriately across different screen sizes
 
@@ -53,7 +55,7 @@ const meta = {
     },
     badge: {
       control: 'select',
-      options: ['none', 'top-left', 'top-center', 'top-right', 'center-left', 'center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right'],
+      options: ['none', 'top-left', 'top-center', 'top-right', 'start', 'center', 'end', 'bottom-left', 'bottom-center', 'bottom-right'],
       description: 'Badge position and visibility',
     },
     badgeShape: {
@@ -81,6 +83,15 @@ const meta = {
       control: 'text',
       description: 'CSS class name for the second part of the logo text',
     },
+    image: {
+      control: 'text',
+      description: 'Optional image to display alongside the logo text (image path or React component)',
+    },
+    imagePosition: {
+      control: 'select',
+      options: ['none', 'top-left', 'top-center', 'top-right', 'start', 'center', 'end', 'bottom-left', 'bottom-center', 'bottom-right'],
+      description: 'Position of the image relative to the logo text',
+    },
     onClick: {
       description: 'Click handler for the logo',
     },
@@ -218,16 +229,16 @@ export const BadgePositioning: Story = {
         <p>Top Right</p>
       </div>
       <div style={{ textAlign: 'center' }}>
-        <Logo name="CL" size="large" badge="center-left" />
-        <p>Center Left</p>
+        <Logo name="ST" size="large" badge="start" />
+        <p>Start (Left)</p>
       </div>
       <div style={{ textAlign: 'center' }}>
         <Logo name="C" size="large" badge="center" />
         <p>Center</p>
       </div>
       <div style={{ textAlign: 'center' }}>
-        <Logo name="CR" size="large" badge="center-right" />
-        <p>Center Right</p>
+        <Logo name="EN" size="large" badge="end" />
+        <p>End (Right)</p>
       </div>
       <div style={{ textAlign: 'center' }}>
         <Logo name="BL" size="large" badge="bottom-left" />
@@ -398,3 +409,151 @@ export const BadgePositionScaling: Story = {
     },
   },
 };
+
+// Image Support Examples
+export const WithImageSupport: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '30px', flexWrap: 'wrap', alignItems: 'center' }}>
+      <div style={{ textAlign: 'center' }}>
+        <Logo name="Qwick Apps" size="medium" />
+        <p>Text Only</p>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <Logo 
+          name="Qwick Apps" 
+          size="medium" 
+          image="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='12' fill='%23007bff'/><text x='16' y='20' text-anchor='middle' fill='white' font-size='14' font-weight='bold'>Q</text></svg>" 
+          imagePosition="start" 
+        />
+        <p>With Image (Start)</p>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <Logo 
+          name="Qwick Apps" 
+          size="medium" 
+          image="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='12' fill='%2316a34a'/><text x='16' y='20' text-anchor='middle' fill='white' font-size='14' font-weight='bold'>A</text></svg>" 
+          imagePosition="end" 
+        />
+        <p>With Image (End)</p>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <Logo 
+          name="Qwick Apps" 
+          size="medium" 
+          image="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='12' fill='%23dc2626'/><text x='16' y='20' text-anchor='middle' fill='white' font-size='14' font-weight='bold'>T</text></svg>" 
+          imagePosition="top-center" 
+        />
+        <p>With Image (Top)</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Examples of Logo component with image support showing different positioning options.',
+      },
+    },
+  },
+};
+
+// Image Position Comparison
+export const ImagePositionComparison: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px', alignItems: 'center', maxWidth: '600px' }}>
+      <div style={{ textAlign: 'center' }}>
+        <Logo 
+          name="Start" 
+          size="large" 
+          image="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect x='4' y='4' width='24' height='24' fill='%23007bff' rx='4'/></svg>" 
+          imagePosition="start" 
+        />
+        <p>Start Position</p>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <Logo 
+          name="End" 
+          size="large" 
+          image="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect x='4' y='4' width='24' height='24' fill='%2316a34a' rx='4'/></svg>" 
+          imagePosition="end" 
+        />
+        <p>End Position</p>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <Logo 
+          name="Top" 
+          size="large" 
+          image="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect x='4' y='4' width='24' height='24' fill='%23dc2626' rx='4'/></svg>" 
+          imagePosition="top-center" 
+        />
+        <p>Top Center</p>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <Logo 
+          name="Bottom" 
+          size="large" 
+          image="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect x='4' y='4' width='24' height='24' fill='%23f59e0b' rx='4'/></svg>" 
+          imagePosition="bottom-center" 
+        />
+        <p>Bottom Center</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparison of different image positioning options relative to the logo text.',
+      },
+    },
+  },
+};
+
+// Image with Different Sizes
+export const ImageScaling: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '30px', flexWrap: 'wrap', alignItems: 'center' }}>
+      <div style={{ textAlign: 'center' }}>
+        <Logo 
+          name="Tiny Logo" 
+          size="tiny" 
+          image="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='12' fill='%23007bff'/></svg>" 
+          imagePosition="start" 
+        />
+        <p>Tiny Size</p>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <Logo 
+          name="Small Logo" 
+          size="small" 
+          image="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='12' fill='%23007bff'/></svg>" 
+          imagePosition="start" 
+        />
+        <p>Small Size</p>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <Logo 
+          name="Medium Logo" 
+          size="medium" 
+          image="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='12' fill='%23007bff'/></svg>" 
+          imagePosition="start" 
+        />
+        <p>Medium Size</p>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <Logo 
+          name="Large Logo" 
+          size="large" 
+          image="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='12' fill='%23007bff'/></svg>" 
+          imagePosition="start" 
+        />
+        <p>Large Size</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates how images scale proportionally with logo text size.',
+      },
+    },
+  },
+};

package/src/stories/Markdown.stories.tsx

@@ -8,43 +8,43 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Markdown } from '../components/Markdown';
 
 const meta: Meta<typeof Markdown> = {
-  title: 'Components/Markdown',
-  component: Markdown,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: 'The Markdown component converts Markdown strings to React components via Html transformation. Supports GitHub Flavored Markdown with Framework component integration for code blocks, buttons, and more.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: 'text',
-      description: 'Markdown content as string',
-    },
-    sanitize: {
-      control: 'boolean',
-      description: 'Whether to sanitize HTML output',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Fallback content when Markdown is empty',
-    },
-    component: {
-      control: 'text',
-      description: 'Container element type',
-    },
-  },
+ title: 'Components/Markdown',
+ component: Markdown,
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'The Markdown component converts Markdown strings to React components via Html transformation. Supports GitHub Flavored Markdown with Framework component integration for code blocks, buttons, and more.',
+ },
+ },
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ children: {
+ control: 'text',
+ description: 'Markdown content as string',
+ },
+ sanitize: {
+ control: 'boolean',
+ description: 'Whether to sanitize HTML output',
+ },
+ placeholder: {
+ control: 'text',
+ description: 'Fallback content when Markdown is empty',
+ },
+ component: {
+ control: 'text',
+ description: 'Container element type',
+ },
+ },
 };
 
 export default meta;
 type Story = StoryObj<typeof Markdown>;
 
 export const BasicMarkdown: Story = {
-  args: {
-    children: `# Welcome to QwickApps React Framework
+ args: {
+ children: `# Welcome to QwickApps React Framework
 
 This is a **basic example** of Markdown content being rendered with the Markdown component.
 
@@ -58,19 +58,19 @@ This is a **basic example** of Markdown content being rendered with the Markdown
 ### Getting Started
 
 Just wrap your Markdown content in the \`<Markdown>\` component and you're ready to go!`,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Basic Markdown content with headings, emphasis, links, and lists. All content gets Framework styling automatically.',
-      },
-    },
-  },
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Basic Markdown content with headings, emphasis, links, and lists. All content gets Framework styling automatically.',
+ },
+ },
+ },
 };
 
 export const CodeExamples: Story = {
-  args: {
-    children: `# Code Examples
+ args: {
+ children: `# Code Examples
 
 The Markdown component automatically transforms code blocks into the Framework Code component.
 
@@ -78,13 +78,13 @@ The Markdown component automatically transforms code blocks into the Framework C
 
 \`\`\`javascript
 function createApp(options) {
-  return {
-    name: options.appName,
-    version: '1.0.0',
-    start() {
-      console.log(\`Starting \${this.name}...\`);
-    }
-  };
+ return {
+ name: options.appName,
+ version: '1.0.0',
+ start() {
+ console.log(\`Starting \${this.name}...\`);
+ }
+ };
 }
 
 const app = createApp({ appName: 'My QwickApp' });
@@ -95,16 +95,16 @@ app.start();
 
 \`\`\`typescript
 interface AppConfig {
-  name: string;
-  version: string;
-  features: string[];
-  debug?: boolean;
+ name: string;
+ version: string;
+ features: string[];
+ debug?: boolean;
 }
 
 const config: AppConfig = {
-  name: 'QwickApp',
-  version: '2.0.0',
-  features: ['responsive', 'theming', 'components']
+ name: 'QwickApp',
+ version: '2.0.0',
+ features: ['responsive', 'theming', 'components']
 };
 \`\`\`
 
@@ -118,19 +118,19 @@ You can also use \`inline code\` within paragraphs. The Markdown component prese
 This is a plain code block without language specification.
 It still gets the Code component treatment with copy functionality.
 \`\`\``,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Code blocks in Markdown are automatically transformed into Framework Code components with syntax highlighting and interactive features.',
-      },
-    },
-  },
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Code blocks in Markdown are automatically transformed into Framework Code components with syntax highlighting and interactive features.',
+ },
+ },
+ },
 };
 
 export const GitHubFlavoredMarkdown: Story = {
-  args: {
-    children: `# GitHub Flavored Markdown Support
+ args: {
+ children: `# GitHub Flavored Markdown Support
 
 The Markdown component supports GitHub Flavored Markdown (GFM) features.
 
@@ -170,19 +170,19 @@ Content above the rule.
 ---
 
 Content below the rule.`,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'GitHub Flavored Markdown features like strikethrough, task lists, and tables are fully supported.',
-      },
-    },
-  },
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'GitHub Flavored Markdown features like strikethrough, task lists, and tables are fully supported.',
+ },
+ },
+ },
 };
 
 export const ComplexDocument: Story = {
-  args: {
-    children: `# QwickApps React Framework Guide
+ args: {
+ children: `# QwickApps React Framework Guide
 
 Welcome to the comprehensive guide for using the QwickApps React Framework with Markdown content.
 
@@ -200,11 +200,11 @@ Getting started with QwickApps is easy:
 import { Markdown } from '@qwickapps/react-framework';
 
 function DocumentPage({ content }: { content: string }) {
-  return (
-    <div>
-      <Markdown>{content}</Markdown>
-    </div>
-  );
+ return (
+ <div>
+ <Markdown>{content}</Markdown>
+ </div>
+ );
 }
 \`\`\`
 
@@ -216,13 +216,13 @@ The framework automatically highlights code in various languages:
 
 \`\`\`python
 def fibonacci(n):
-    if n <= 1:
-        return n
-    return fibonacci(n-1) + fibonacci(n-2)
+ if n <= 1:
+ return n
+ return fibonacci(n-1) + fibonacci(n-2)
 
 # Generate first 10 Fibonacci numbers
 for i in range(10):
-    print(f"F({i}) = {fibonacci(i)}")
+ print(f"F({i}) = {fibonacci(i)}")
 \`\`\`
 
 ### Interactive Elements
@@ -232,10 +232,10 @@ for i in range(10):
 ### Lists and Organization
 
 **Key Benefits:**
-- 🚀 **Performance**: Optimized rendering pipeline
-- 🎨 **Theming**: Automatic theme integration
-- 🔧 **Flexibility**: Configurable transformation rules
-- 📱 **Responsive**: Mobile-first design approach
+- **Performance**: Optimized rendering pipeline
+- **Theming**: Automatic theme integration
+- **Flexibility**: Configurable transformation rules
+- **Responsive**: Mobile-first design approach
 - ♿ **Accessibility**: WCAG compliant components
 
 **Supported Content Types:**
@@ -264,34 +264,34 @@ The QwickApps React Framework Markdown component provides a powerful way to rend
 
 ---
 
-*Happy coding with QwickApps! 🎉*`,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A comprehensive document demonstrating various Markdown features working together in a real-world scenario.',
-      },
-    },
-  },
+*Happy coding with QwickApps! *`,
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'A comprehensive document demonstrating various Markdown features working together in a real-world scenario.',
+ },
+ },
+ },
 };
 
 export const EmptyContent: Story = {
-  args: {
-    children: '',
-    placeholder: 'No documentation available yet. Check back later!',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'When no Markdown content is provided, a placeholder message can be displayed with appropriate styling.',
-      },
-    },
-  },
+ args: {
+ children: '',
+ placeholder: 'No documentation available yet. Check back later!',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'When no Markdown content is provided, a placeholder message can be displayed with appropriate styling.',
+ },
+ },
+ },
 };
 
 export const CustomConfiguration: Story = {
-  args: {
-    children: `# Custom Configuration
+ args: {
+ children: `# Custom Configuration
 
 This example shows Markdown with custom marked options.
 
@@ -299,32 +299,32 @@ Line 1
 Line 2
 
 The breaks option can convert single line breaks to \`<br>\` tags.`,
-    markedOptions: {
-      breaks: true,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'The Markdown component accepts custom marked.js options for fine-tuning the parsing behavior.',
-      },
-    },
-  },
+ markedOptions: {
+ breaks: true,
+ },
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'The Markdown component accepts custom marked.js options for fine-tuning the parsing behavior.',
+ },
+ },
+ },
 };
 
 export const MixedContent: Story = {
-  args: {
-    children: `# Mixed HTML and Markdown
+ args: {
+ children: `# Mixed HTML and Markdown
 
 You can mix HTML with Markdown when needed:
 
 <div style="padding: 16px; border: 1px solid #ccc; border-radius: 8px; background: #f9f9f9;">
-  This is **HTML with Markdown** inside it!
-  
-  \`\`\`javascript
-  const mixed = 'HTML and Markdown';
-  console.log(\`Working with \${mixed}\`);
-  \`\`\`
+ This is **HTML with Markdown** inside it!
+ 
+ \`\`\`javascript
+ const mixed = 'HTML and Markdown';
+ console.log(\`Working with \${mixed}\`);
+ \`\`\`
 </div>
 
 Back to regular **Markdown content** here.
@@ -338,12 +338,12 @@ Back to regular **Markdown content** here.
 | HTML Only | Complete control | Verbose syntax |
 
 Choose the approach that best fits your content needs!`,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Markdown content can include HTML elements when additional structure or styling is needed.',
-      },
-    },
-  },
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: 'Markdown content can include HTML elements when additional structure or styling is needed.',
+ },
+ },
+ },
 };