valtech-components 2.0.688 → 2.0.689

package/src/lib/components/atoms/qr-code/qr-code.stories.ts

@@ -0,0 +1,767 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { QrCodeComponent } from './qr-code.component';
+import { QrCodeMetadata } from './types';
+import { QrResult, QR_PRESETS } from '../../../services/qr-generator/types';
+
+/**
+ * Real QR code PNG for "https://valtech.com" encoded as base64.
+ * Generated using QR Server API (https://api.qrserver.com).
+ */
+const REAL_QR_BASE64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsAQMAAABDsxw2AAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABY0lEQVRoge3a3XGEMAwEYFEBJVAqrboEKrCCrZXsS8LNPVo3q2GYA39vG/8Skc/qVK+rPd531SqyadmiRQvZGuxCag30Sw5ruqW1bGTpmOWu4QE8/UKWmOFHq0r2HUx2bdkfbsjSsjFEq96yt5p8GMnJFmfq5dMuQi+PKy6yxdlL7e2d92V5LLK12Rm598IoLX2gjossG0Pieyyo6pB+J8vExomE2o++jY3lcW2PhSwTG/1XsJPtTdWxYE1FlojFQVOM1TbnHv3RFlRka7DzQpRzuMhxnk/JUrGYSQ177nXcC1kyZr3YVkqKvUxPH/19I0vHWkfGzhQrJYzPqrFRJUvE5mrvY/5F+vU3IluenR6yXlPuZRuX/jlCJFucTWf48vJ/Dh59LKXI8jDkHscOZT69tz8AsrQsFsninRqYLC3D91NjdWCybMwKue+KzQ6q/vPpnGxxFi8Gs3r36ZxsZfZZ/QDU06TZP0gO/gAAAABJRU5ErkJggg==';
+
+/**
+ * Converts a base64 data URL to a Blob.
+ */
+function dataUrlToBlob(dataUrl: string): Blob {
+  const parts = dataUrl.split(',');
+  const mimeMatch = parts[0].match(/:(.*?);/);
+  const mime = mimeMatch ? mimeMatch[1] : 'image/png';
+  const bstr = atob(parts[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime });
+}
+
+/**
+ * Creates a mock QR result using a real QR code image.
+ * In real usage, this would come from QrGeneratorService.generate()
+ */
+const createMockQrResult = (
+  data: string = 'https://valtech.com',
+  preset: keyof typeof QR_PRESETS = 'default'
+): QrResult => {
+  const config = { data, ...QR_PRESETS[preset] };
+
+  return {
+    config,
+    dataUrl: REAL_QR_BASE64,
+    blob: dataUrlToBlob(REAL_QR_BASE64),
+    mimeType: 'image/png',
+    extension: 'png',
+    generatedAt: new Date(),
+  };
+};
+
+const meta: Meta<QrCodeComponent> = {
+  title: 'Atoms/QrCode',
+  component: QrCodeComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, QrCodeComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'QR code configuration object',
+      control: 'object',
+    },
+    actionComplete: {
+      action: 'actionComplete',
+      description: 'Event emitted when download/copy/share action completes',
+    },
+    imageLoad: {
+      action: 'imageLoad',
+      description: 'Event emitted when QR image loads',
+    },
+    imageError: {
+      action: 'imageError',
+      description: 'Event emitted when QR image fails to load',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-qr-code
+
+A component to display QR codes generated by the QrGeneratorService. Provides optional action buttons for download, copy to clipboard, and share functionality.
+
+### Usage
+
+\`\`\`typescript
+// In your component
+import { QrGeneratorService } from '@valtech/components';
+
+export class MyComponent {
+  qrResult: QrResult;
+
+  constructor(private qrService: QrGeneratorService) {}
+
+  async generateQr() {
+    this.qrResult = await this.qrService.generate({
+      data: 'https://example.com',
+      width: 300,
+      dotsStyle: 'rounded'
+    });
+  }
+}
+\`\`\`
+
+\`\`\`html
+<val-qr-code
+  [props]="{
+    qr: qrResult,
+    showDownload: true,
+    showCopy: true,
+    displaySize: 200
+  }"
+  (actionComplete)="handleAction($event)"
+></val-qr-code>
+\`\`\`
+
+### Features
+
+- Display QR codes from QrGeneratorService
+- Download button to save QR as image
+- Copy to clipboard functionality
+- Native share support (when available)
+- Customizable size, border, and styling
+- Loading state support
+- Reactive content support for labels
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<QrCodeComponent>;
+
+export const Default: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Valtech QR Code',
+    } as QrCodeMetadata,
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'QR Code with actions',
+      showDownload: true,
+      showCopy: true,
+      showShare: true,
+      downloadLabel: 'Download',
+      copyLabel: 'Copy',
+      shareLabel: 'Share',
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'QR code with action buttons for download, copy, and share. Share button visibility depends on browser support.',
+      },
+    },
+  },
+};
+
+export const WithBorder: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'QR Code with border',
+      showBorder: true,
+      borderRadius: 12,
+      padding: 16,
+      containerBackground: '#ffffff',
+      showDownload: true,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'QR code with a styled container including border, padding, and rounded corners.',
+      },
+    },
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Small QR Code',
+      displaySize: 150,
+      showBorder: true,
+      borderRadius: 8,
+      padding: 8,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'QR code with custom display size. The displaySize prop scales the QR code independently of the original generation size.',
+      },
+    },
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Loading QR Code',
+      loading: true,
+      showBorder: true,
+      borderRadius: 12,
+      padding: 16,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'QR code in loading state shows a spinner overlay. Useful when regenerating or updating the QR code.',
+      },
+    },
+  },
+};
+
+export const StyledContainer: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Styled QR Code container',
+      showBorder: true,
+      borderRadius: 20,
+      padding: 20,
+      containerBackground: '#f5f5f5',
+      showDownload: true,
+      showCopy: true,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+QR code with styled container. Note: The QR pattern styles (rounded, dots, classy, modern)
+are configured via \`QrGeneratorService.generate()\` using presets like:
+
+\`\`\`typescript
+// Available presets: 'default', 'rounded', 'dots', 'classy', 'modern'
+const qr = await this.qrService.generate({
+  data: 'https://example.com',
+  ...QR_PRESETS['rounded']
+});
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export const LargeWithAllOptions: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com/products/amazing-product?utm_source=qr'),
+      alt: 'Large QR Code with all options',
+      displaySize: 350,
+      showBorder: true,
+      borderRadius: 24,
+      padding: 24,
+      containerBackground: '#fafafa',
+      showDownload: true,
+      showCopy: true,
+      showShare: true,
+      downloadLabel: 'Save QR',
+      copyLabel: 'Copy Image',
+      shareLabel: 'Share',
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large QR code showcasing all available options including custom labels for action buttons.',
+      },
+    },
+  },
+};
+
+export const CustomFilenameAndShare: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com/promo'),
+      alt: 'Promotional QR Code',
+      showDownload: true,
+      showCopy: true,
+      showShare: true,
+      downloadFilename: 'valtech-promo-qr',
+      shareTitle: 'Valtech Promotional QR',
+      shareText: 'Scan this QR code to visit our promotional page!',
+      shareFilename: 'valtech-promo.png',
+      showBorder: true,
+      borderRadius: 12,
+      padding: 16,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+QR code with custom filename for download and custom share options.
+
+**New props available:**
+- \`downloadFilename\`: Custom filename for downloads (without extension)
+- \`shareTitle\`: Title shown in share dialog
+- \`shareText\`: Description text accompanying the shared image
+- \`shareFilename\`: Custom filename for the shared file
+
+\`\`\`html
+<val-qr-code
+  [props]="{
+    qr: qrResult,
+    showDownload: true,
+    showShare: true,
+    downloadFilename: 'my-custom-qr',
+    shareTitle: 'Check this QR!',
+    shareText: 'Scan to visit our site',
+    shareFilename: 'custom-qr.png'
+  }"
+></val-qr-code>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+// ===========================
+// MODERN THEMED STORIES
+// ===========================
+
+export const WithLabel: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'QR with label',
+      label: {
+        text: 'Escanéame',
+        position: 'bottom',
+        fontWeight: 'semibold',
+        fontSize: 16,
+      },
+      showBorder: true,
+      borderRadius: 16,
+      padding: 20,
+      containerBackground: '#ffffff',
+      shadow: 'md',
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'QR code with a customizable label. Labels can be positioned at top or bottom and styled with custom colors, sizes, and font weights.',
+      },
+    },
+  },
+};
+
+export const ThemeGradientPurple: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Purple gradient QR',
+      theme: 'gradient-purple',
+      label: {
+        text: '¡Comparte!',
+        position: 'bottom',
+        fontWeight: 'bold',
+        fontSize: 18,
+      },
+      showDownload: true,
+      showShare: true,
+      displaySize: 200,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Modern purple gradient theme with white labels and action buttons.',
+      },
+    },
+  },
+};
+
+export const ThemeGradientBlue: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Blue gradient QR',
+      theme: 'gradient-blue',
+      label: {
+        text: 'Scan Me',
+        position: 'top',
+        fontWeight: 'bold',
+        fontSize: 16,
+      },
+      showDownload: true,
+      displaySize: 180,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Fresh blue-cyan gradient theme perfect for tech and modern applications.',
+      },
+    },
+  },
+};
+
+export const ThemeGradientSunset: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Sunset gradient QR',
+      theme: 'gradient-sunset',
+      label: {
+        text: 'Visit Us',
+        position: 'bottom',
+        fontWeight: 'semibold',
+        fontSize: 16,
+      },
+      showDownload: true,
+      showCopy: true,
+      displaySize: 200,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Warm sunset gradient theme with pink and yellow tones.',
+      },
+    },
+  },
+};
+
+export const ThemeGradientMint: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Mint gradient QR',
+      theme: 'gradient-mint',
+      label: {
+        text: 'Eco-Friendly',
+        position: 'bottom',
+        fontWeight: 'medium',
+        fontSize: 14,
+      },
+      showDownload: true,
+      displaySize: 180,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Fresh mint/green gradient theme, great for eco-friendly or nature-related content.',
+      },
+    },
+  },
+};
+
+export const ThemeDark: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Dark theme QR',
+      theme: 'dark',
+      label: {
+        text: 'Dark Mode',
+        position: 'bottom',
+        fontWeight: 'semibold',
+        fontSize: 16,
+      },
+      showDownload: true,
+      showCopy: true,
+      displaySize: 200,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dark theme with inverted QR for dark mode UIs. The QR image is automatically inverted to maintain visibility.',
+      },
+    },
+  },
+};
+
+export const ThemeNeon: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Neon theme QR',
+      theme: 'neon',
+      glowColor: '#8b5cf6',
+      label: {
+        text: 'CYBER',
+        position: 'bottom',
+        fontWeight: 'bold',
+        fontSize: 18,
+      },
+      showDownload: true,
+      displaySize: 200,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Futuristic neon theme with customizable glow color. Perfect for gaming, tech, or cyberpunk aesthetics.',
+      },
+    },
+  },
+};
+
+export const NeonPink: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Neon pink QR',
+      theme: 'neon',
+      glowColor: '#ec4899',
+      label: {
+        text: 'SCAN NOW',
+        position: 'top',
+        fontWeight: 'bold',
+        fontSize: 16,
+      },
+      showDownload: true,
+      showShare: true,
+      displaySize: 180,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Neon theme with pink glow color.',
+      },
+    },
+  },
+};
+
+export const CustomGradient: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Custom gradient QR',
+      gradient: {
+        from: '#f97316',
+        via: '#ef4444',
+        to: '#ec4899',
+        direction: 'to-bottom-right',
+      },
+      borderRadius: 20,
+      padding: 24,
+      label: {
+        text: 'Custom Colors',
+        position: 'bottom',
+        color: 'white',
+        fontWeight: 'bold',
+        fontSize: 16,
+      },
+      shadow: 'lg',
+      showDownload: true,
+      displaySize: 200,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+Create custom gradients with the \`gradient\` prop:
+
+\`\`\`typescript
+gradient: {
+  from: '#f97316',  // Start color
+  via: '#ef4444',   // Optional middle color
+  to: '#ec4899',    // End color
+  direction: 'to-bottom-right'  // Direction
+}
+\`\`\`
+
+Available directions: \`to-right\`, \`to-left\`, \`to-bottom\`, \`to-top\`, \`to-bottom-right\`, \`to-bottom-left\`, \`to-top-right\`, \`to-top-left\`
+        `,
+      },
+    },
+  },
+};
+
+export const WithShadowAndScale: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Interactive QR',
+      containerBackground: '#ffffff',
+      borderRadius: 16,
+      padding: 20,
+      shadow: 'lg',
+      scaleOnHover: true,
+      label: {
+        text: 'Hover me!',
+        position: 'bottom',
+        fontWeight: 'medium',
+        fontSize: 14,
+        color: '#6366f1',
+      },
+      showDownload: true,
+      showCopy: true,
+      displaySize: 200,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'QR code with shadow and scale animation on hover. Use `scaleOnHover: true` for subtle interactive feedback.',
+      },
+    },
+  },
+};
+
+export const WithPulseAnimation: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Pulsing QR',
+      theme: 'gradient-purple',
+      pulseOnHover: true,
+      label: {
+        text: 'Hover for effect',
+        position: 'bottom',
+        fontWeight: 'semibold',
+        fontSize: 14,
+      },
+      displaySize: 200,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'QR code with pulse animation on hover. Use `pulseOnHover: true` to draw attention to the QR code.',
+      },
+    },
+  },
+};
+
+export const RoundedQR: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'Rounded QR',
+      containerBackground: '#f1f5f9',
+      borderRadius: 24,
+      padding: 24,
+      qrBorderRadius: 16,
+      shadow: 'md',
+      label: {
+        text: 'Rounded corners',
+        position: 'bottom',
+        fontWeight: 'medium',
+        fontSize: 14,
+        color: '#475569',
+      },
+      displaySize: 200,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'QR code with rounded corners on both the container and the QR image itself using `qrBorderRadius`.',
+      },
+    },
+  },
+};
+
+export const LabelWithIcon: Story = {
+  args: {
+    props: {
+      qr: createMockQrResult('https://valtech.com'),
+      alt: 'QR with icon label',
+      theme: 'gradient-blue',
+      label: {
+        text: 'Scan with camera',
+        position: 'bottom',
+        fontWeight: 'semibold',
+        fontSize: 14,
+        icon: 'camera-outline',
+        iconPosition: 'start',
+      },
+      showDownload: true,
+      displaySize: 200,
+    } as QrCodeMetadata,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Labels can include Ionicons using the `icon` and `iconPosition` properties.',
+      },
+    },
+  },
+};
+
+export const ModernShowcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-wrap: wrap; gap: 24px; padding: 24px; background: #f8fafc;">
+        <val-qr-code [props]="purple"></val-qr-code>
+        <val-qr-code [props]="blue"></val-qr-code>
+        <val-qr-code [props]="sunset"></val-qr-code>
+        <val-qr-code [props]="mint"></val-qr-code>
+        <val-qr-code [props]="dark"></val-qr-code>
+        <val-qr-code [props]="neon"></val-qr-code>
+      </div>
+    `,
+    props: {
+      purple: {
+        qr: createMockQrResult('https://valtech.com'),
+        theme: 'gradient-purple',
+        label: { text: 'Purple', position: 'bottom', fontWeight: 'bold' },
+        displaySize: 150,
+      },
+      blue: {
+        qr: createMockQrResult('https://valtech.com'),
+        theme: 'gradient-blue',
+        label: { text: 'Blue', position: 'bottom', fontWeight: 'bold' },
+        displaySize: 150,
+      },
+      sunset: {
+        qr: createMockQrResult('https://valtech.com'),
+        theme: 'gradient-sunset',
+        label: { text: 'Sunset', position: 'bottom', fontWeight: 'bold' },
+        displaySize: 150,
+      },
+      mint: {
+        qr: createMockQrResult('https://valtech.com'),
+        theme: 'gradient-mint',
+        label: { text: 'Mint', position: 'bottom', fontWeight: 'bold' },
+        displaySize: 150,
+      },
+      dark: {
+        qr: createMockQrResult('https://valtech.com'),
+        theme: 'dark',
+        label: { text: 'Dark', position: 'bottom', fontWeight: 'bold' },
+        displaySize: 150,
+      },
+      neon: {
+        qr: createMockQrResult('https://valtech.com'),
+        theme: 'neon',
+        glowColor: '#8b5cf6',
+        label: { text: 'Neon', position: 'bottom', fontWeight: 'bold' },
+        displaySize: 150,
+      },
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Showcase of all available theme presets side by side.',
+      },
+    },
+  },
+};