valtech-components 2.0.794 → 2.0.795

package/src/lib/components/molecules/share-buttons/share-buttons.stories.ts

@@ -0,0 +1,343 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { ShareButtonsComponent } from './share-buttons.component';
+import { ShareButtonsMetadata } from './types';
+
+const createShareButtonsProps = (overrides: Partial<ShareButtonsMetadata> = {}): ShareButtonsMetadata => ({
+  shareData: {
+    title: 'Join my raffle!',
+    text: 'Win amazing prizes in this charity raffle',
+    url: 'https://raffle.example.com/abc123',
+  },
+  ...overrides,
+});
+
+const meta: Meta<ShareButtonsComponent> = {
+  title: 'Molecules/ShareButtons',
+  component: ShareButtonsComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ShareButtonsComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Share buttons configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'ShareButtonsMetadata',
+          detail: `{
+  shareData: {
+    title?: string;
+    text?: string;
+    url?: string;
+    hashtags?: string[];
+    emailSubject?: string;
+    emailBody?: string;
+  };
+  platforms?: SharePlatform[];
+  layout?: 'horizontal' | 'vertical';
+  size?: 'small' | 'medium' | 'large';
+  variant?: 'solid' | 'outline' | 'icon-only';
+  showLabels?: boolean;
+  usePlatformColors?: boolean;
+  showCopyToast?: boolean;
+}`,
+        },
+      },
+    },
+    shareComplete: {
+      action: 'shareComplete',
+      description: 'Event emitted when a share action completes',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-share-buttons
+
+Social sharing buttons for promoting raffles and content across platforms.
+
+### Supported Platforms
+
+- **whatsapp**: Share via WhatsApp
+- **facebook**: Share on Facebook
+- **twitter**: Post on Twitter/X
+- **telegram**: Send via Telegram
+- **linkedin**: Share on LinkedIn
+- **email**: Send via email
+- **copy**: Copy link to clipboard
+- **native**: Use device's native share (if available)
+
+### Usage
+
+\`\`\`html
+<val-share-buttons
+  [props]="{
+    shareData: {
+      title: 'Win a prize!',
+      text: 'Join this amazing raffle',
+      url: 'https://raffle.example.com/123'
+    },
+    platforms: ['whatsapp', 'facebook', 'twitter', 'copy'],
+    variant: 'icon-only'
+  }"
+  (shareComplete)="onShare($event)"
+></val-share-buttons>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ShareButtonsComponent>;
+
+export const Default: Story = {
+  args: {
+    props: createShareButtonsProps(),
+  },
+};
+
+export const AllPlatforms: Story = {
+  args: {
+    props: createShareButtonsProps({
+      platforms: ['whatsapp', 'facebook', 'twitter', 'telegram', 'linkedin', 'email', 'copy'],
+    }),
+  },
+};
+
+export const IconOnly: Story = {
+  args: {
+    props: createShareButtonsProps({
+      variant: 'icon-only',
+      platforms: ['whatsapp', 'facebook', 'twitter', 'telegram', 'copy'],
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact circular buttons showing only icons.',
+      },
+    },
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    props: createShareButtonsProps({
+      variant: 'outline',
+      platforms: ['whatsapp', 'facebook', 'twitter', 'copy'],
+    }),
+  },
+};
+
+export const VerticalLayout: Story = {
+  args: {
+    props: createShareButtonsProps({
+      layout: 'vertical',
+      platforms: ['whatsapp', 'facebook', 'twitter', 'email', 'copy'],
+    }),
+  },
+};
+
+export const SizeSmall: Story = {
+  args: {
+    props: createShareButtonsProps({
+      size: 'small',
+      variant: 'icon-only',
+    }),
+  },
+};
+
+export const SizeLarge: Story = {
+  args: {
+    props: createShareButtonsProps({
+      size: 'large',
+      variant: 'icon-only',
+    }),
+  },
+};
+
+export const WithoutLabels: Story = {
+  args: {
+    props: createShareButtonsProps({
+      showLabels: false,
+      variant: 'solid',
+    }),
+  },
+};
+
+export const SingleColor: Story = {
+  args: {
+    props: createShareButtonsProps({
+      usePlatformColors: false,
+      color: 'primary',
+      variant: 'solid',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'All buttons use the same color instead of platform colors.',
+      },
+    },
+  },
+};
+
+export const WhatsAppOnly: Story = {
+  args: {
+    props: createShareButtonsProps({
+      platforms: ['whatsapp'],
+      shareData: {
+        text: '¡Participa en esta increíble rifa! 🎉',
+        url: 'https://raffle.example.com/123',
+      },
+      size: 'large',
+    }),
+  },
+};
+
+export const SocialMedia: Story = {
+  args: {
+    props: createShareButtonsProps({
+      platforms: ['facebook', 'twitter', 'linkedin'],
+      variant: 'icon-only',
+      size: 'large',
+    }),
+  },
+};
+
+export const MessagingApps: Story = {
+  args: {
+    props: createShareButtonsProps({
+      platforms: ['whatsapp', 'telegram', 'email'],
+      variant: 'solid',
+    }),
+  },
+};
+
+export const CopyOnly: Story = {
+  args: {
+    props: createShareButtonsProps({
+      platforms: ['copy'],
+      showCopyToast: true,
+      copySuccessMessage: '¡Enlace copiado al portapapeles!',
+    }),
+  },
+};
+
+export const WithHashtags: Story = {
+  args: {
+    props: createShareButtonsProps({
+      platforms: ['twitter'],
+      shareData: {
+        text: 'Join this amazing raffle!',
+        url: 'https://raffle.example.com',
+        hashtags: ['raffle', 'charity', 'win'],
+      },
+    }),
+  },
+};
+
+export const CustomGap: Story = {
+  args: {
+    props: createShareButtonsProps({
+      gap: 16,
+      variant: 'icon-only',
+    }),
+  },
+};
+
+export const RaffleShare: Story = {
+  args: {
+    props: createShareButtonsProps({
+      shareData: {
+        title: '🎉 Gran Rifa Benéfica 2024',
+        text: '¡Participa y gana un iPhone 15 Pro! Solo $50 por boleto. Todos los fondos van a caridad.',
+        url: 'https://raffle.example.com/iphone-2024',
+      },
+      platforms: ['whatsapp', 'facebook', 'twitter', 'copy'],
+      variant: 'solid',
+      size: 'medium',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Complete example for sharing a raffle.',
+      },
+    },
+  },
+};
+
+export const Showcase: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 40px; max-width: 500px;">
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Solid Buttons</h3>
+          <val-share-buttons [props]="solid"></val-share-buttons>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Icon Only</h3>
+          <val-share-buttons [props]="iconOnly"></val-share-buttons>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Outline</h3>
+          <val-share-buttons [props]="outline"></val-share-buttons>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Sizes</h3>
+          <div style="display: flex; flex-direction: column; gap: 16px;">
+            <val-share-buttons [props]="sizeSmall"></val-share-buttons>
+            <val-share-buttons [props]="sizeMedium"></val-share-buttons>
+            <val-share-buttons [props]="sizeLarge"></val-share-buttons>
+          </div>
+        </div>
+
+        <div>
+          <h3 style="margin: 0 0 16px; font-family: system-ui;">Vertical Layout</h3>
+          <val-share-buttons [props]="vertical"></val-share-buttons>
+        </div>
+
+        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 24px; border-radius: 12px;">
+          <h3 style="margin: 0 0 16px; font-family: system-ui; color: white;">Share This Raffle</h3>
+          <val-share-buttons [props]="raffle"></val-share-buttons>
+        </div>
+      </div>
+    `,
+    props: {
+      solid: createShareButtonsProps({ variant: 'solid' }),
+      iconOnly: createShareButtonsProps({
+        variant: 'icon-only',
+        platforms: ['whatsapp', 'facebook', 'twitter', 'telegram', 'copy'],
+      }),
+      outline: createShareButtonsProps({ variant: 'outline' }),
+      sizeSmall: createShareButtonsProps({ size: 'small', variant: 'icon-only' }),
+      sizeMedium: createShareButtonsProps({ size: 'medium', variant: 'icon-only' }),
+      sizeLarge: createShareButtonsProps({ size: 'large', variant: 'icon-only' }),
+      vertical: createShareButtonsProps({
+        layout: 'vertical',
+        platforms: ['whatsapp', 'facebook', 'twitter'],
+      }),
+      raffle: createShareButtonsProps({
+        shareData: {
+          title: 'Win an iPhone 15!',
+          text: 'Join this charity raffle - only $50 per ticket!',
+          url: 'https://raffle.example.com',
+        },
+        variant: 'solid',
+        platforms: ['whatsapp', 'facebook', 'twitter', 'copy'],
+      }),
+    },
+  }),
+};

package/src/lib/components/molecules/share-buttons/types.ts

@@ -0,0 +1,211 @@
+import { Color } from '@ionic/core';
+
+/**
+ * Social platform identifiers for sharing.
+ */
+export type SharePlatform =
+  | 'whatsapp'
+  | 'facebook'
+  | 'twitter'
+  | 'telegram'
+  | 'linkedin'
+  | 'email'
+  | 'copy'
+  | 'native';
+
+/**
+ * Configuration for a share button.
+ */
+export interface ShareButtonConfig {
+  /** Platform identifier */
+  platform: SharePlatform;
+  /** Custom label (overrides default) */
+  label?: string;
+  /** Custom icon (overrides default) */
+  icon?: string;
+  /** Custom color (overrides default) */
+  color?: Color | string;
+  /** Whether this button is disabled */
+  disabled?: boolean;
+  /** Additional custom data for the platform */
+  customData?: Record<string, string>;
+}
+
+/**
+ * Data to be shared.
+ */
+export interface ShareData {
+  /** Title of the content */
+  title?: string;
+  /** Description or message */
+  text?: string;
+  /** URL to share */
+  url?: string;
+  /** Hashtags (for Twitter) */
+  hashtags?: string[];
+  /** Email subject (for email sharing) */
+  emailSubject?: string;
+  /** Email body (for email sharing) */
+  emailBody?: string;
+  /** Phone number for WhatsApp (optional, for direct messaging) */
+  whatsappPhone?: string;
+}
+
+/**
+ * Metadata for the share buttons component.
+ */
+export interface ShareButtonsMetadata {
+  /** Data to share */
+  shareData: ShareData;
+  /** Platforms to show (defaults to all) */
+  platforms?: SharePlatform[];
+  /** Custom button configurations */
+  buttons?: ShareButtonConfig[];
+
+  // === Display options ===
+  /** Layout direction */
+  layout?: 'horizontal' | 'vertical';
+  /** Size variant */
+  size?: 'small' | 'medium' | 'large';
+  /** Button style */
+  variant?: 'solid' | 'outline' | 'icon-only';
+  /** Show labels */
+  showLabels?: boolean;
+  /** Gap between buttons */
+  gap?: number;
+
+  // === Styling ===
+  /** Custom CSS class */
+  cssClass?: string;
+  /** Use platform colors */
+  usePlatformColors?: boolean;
+  /** Default color (when not using platform colors) */
+  color?: Color;
+
+  // === Behavior ===
+  /** Show copy success toast */
+  showCopyToast?: boolean;
+  /** Copy success message */
+  copySuccessMessage?: string;
+  /** Use native share when available */
+  preferNativeShare?: boolean;
+
+  // === Reactive content ===
+  /** Content class for reactive content */
+  contentClass?: string;
+  /** Content key for copy success message */
+  copySuccessMessageContentKey?: string;
+}
+
+/**
+ * Event emitted when a share action is performed.
+ */
+export interface ShareEvent {
+  /** Platform that was used */
+  platform: SharePlatform;
+  /** Whether the share was successful */
+  success: boolean;
+  /** Error message if failed */
+  error?: string;
+  /** The share data that was used */
+  shareData: ShareData;
+}
+
+/**
+ * Default platform configurations.
+ */
+export interface PlatformConfig {
+  name: string;
+  icon: string;
+  color: string;
+  getUrl: (data: ShareData) => string;
+}
+
+/**
+ * Default platform configurations.
+ */
+export const PLATFORM_CONFIGS: Record<SharePlatform, PlatformConfig> = {
+  whatsapp: {
+    name: 'WhatsApp',
+    icon: 'logo-whatsapp',
+    color: '#25D366',
+    getUrl: (data: ShareData) => {
+      const text = encodeURIComponent(`${data.text || ''} ${data.url || ''}`.trim());
+      if (data.whatsappPhone) {
+        return `https://wa.me/${data.whatsappPhone}?text=${text}`;
+      }
+      return `https://wa.me/?text=${text}`;
+    },
+  },
+  facebook: {
+    name: 'Facebook',
+    icon: 'logo-facebook',
+    color: '#1877F2',
+    getUrl: (data: ShareData) => {
+      const url = encodeURIComponent(data.url || '');
+      return `https://www.facebook.com/sharer/sharer.php?u=${url}`;
+    },
+  },
+  twitter: {
+    name: 'Twitter',
+    icon: 'logo-twitter',
+    color: '#1DA1F2',
+    getUrl: (data: ShareData) => {
+      const text = encodeURIComponent(data.text || '');
+      const url = encodeURIComponent(data.url || '');
+      const hashtags = data.hashtags?.join(',') || '';
+      return `https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=${hashtags}`;
+    },
+  },
+  telegram: {
+    name: 'Telegram',
+    icon: 'paper-plane-outline',
+    color: '#0088CC',
+    getUrl: (data: ShareData) => {
+      const text = encodeURIComponent(data.text || '');
+      const url = encodeURIComponent(data.url || '');
+      return `https://t.me/share/url?url=${url}&text=${text}`;
+    },
+  },
+  linkedin: {
+    name: 'LinkedIn',
+    icon: 'logo-linkedin',
+    color: '#0A66C2',
+    getUrl: (data: ShareData) => {
+      const url = encodeURIComponent(data.url || '');
+      return `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
+    },
+  },
+  email: {
+    name: 'Email',
+    icon: 'mail-outline',
+    color: '#EA4335',
+    getUrl: (data: ShareData) => {
+      const subject = encodeURIComponent(data.emailSubject || data.title || '');
+      const body = encodeURIComponent(data.emailBody || `${data.text || ''}\n\n${data.url || ''}`.trim());
+      return `mailto:?subject=${subject}&body=${body}`;
+    },
+  },
+  copy: {
+    name: 'Copiar enlace',
+    icon: 'copy-outline',
+    color: '#6B7280',
+    getUrl: () => '',
+  },
+  native: {
+    name: 'Compartir',
+    icon: 'share-outline',
+    color: '#6B7280',
+    getUrl: () => '',
+  },
+};
+
+/**
+ * Default platforms to show.
+ */
+export const DEFAULT_PLATFORMS: SharePlatform[] = [
+  'whatsapp',
+  'facebook',
+  'twitter',
+  'copy',
+];