valtech-components 2.0.691 → 2.0.692

package/src/lib/components/molecules/winner-display/winner-display.stories.ts

@@ -1,468 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { WinnerDisplayComponent } from './winner-display.component';
-import { WinnerDisplayMetadata } from './types';
-
-const createWinnerDisplayProps = (overrides: Partial<WinnerDisplayMetadata> = {}): WinnerDisplayMetadata => ({
-  winner: {
-    name: 'María García López',
-    ticketNumber: 42,
-  },
-  mode: 'standard',
-  size: 'medium',
-  animation: 'fade',
-  ...overrides,
-});
-
-const meta: Meta<WinnerDisplayComponent> = {
-  title: 'Molecules/WinnerDisplay',
-  component: WinnerDisplayComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, WinnerDisplayComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Winner display configuration object',
-      control: 'object',
-      table: {
-        type: {
-          summary: 'WinnerDisplayMetadata',
-          detail: `{
-  winner: {
-    name: string;
-    ticketNumber: number | string;
-    avatar?: AvatarMetadata;
-    prize?: string;
-    prizeDescription?: string;
-    prizeImage?: string;
-    prizeValue?: number;
-    location?: string;
-  };
-  mode?: 'compact' | 'standard' | 'full' | 'celebration';
-  size?: 'small' | 'medium' | 'large';
-  animation?: 'none' | 'fade' | 'zoom' | 'slide' | 'spotlight';
-  showConfetti?: boolean;
-  showTrophy?: boolean;
-  autoPlay?: boolean;
-  revealDelay?: number;
-}`,
-        },
-      },
-    },
-    animationComplete: {
-      action: 'animationComplete',
-      description: 'Event emitted when reveal animation completes',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-winner-display
-
-A component for announcing raffle winners with celebration animations.
-
-### Modes
-
-- **compact**: Minimal display (name + ticket only)
-- **standard**: Name, ticket, and prize info
-- **full**: All info including avatar and prize image
-- **celebration**: Full mode with animations
-
-### Animations
-
-- **none**: No animation
-- **fade**: Fade in
-- **zoom**: Zoom in with bounce
-- **slide**: Slide up
-- **spotlight**: Spotlight reveal effect
-
-### Usage
-
-\`\`\`html
-<val-winner-display
-  [props]="{
-    winner: {
-      name: 'Juan Pérez',
-      ticketNumber: 156,
-      prize: 'iPhone 15 Pro',
-      prizeValue: 25000,
-      location: 'CDMX, México'
-    },
-    mode: 'celebration',
-    showConfetti: true,
-    animation: 'zoom'
-  }"
-  (animationComplete)="onReveal($event)"
-></val-winner-display>
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<WinnerDisplayComponent>;
-
-export const Default: Story = {
-  args: {
-    props: createWinnerDisplayProps(),
-  },
-};
-
-export const ModeCompact: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      mode: 'compact',
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Minimal display with just name and ticket number.',
-      },
-    },
-  },
-};
-
-export const ModeStandard: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      mode: 'standard',
-      winner: {
-        name: 'Carlos Rodríguez',
-        ticketNumber: 156,
-        prize: 'iPhone 15 Pro Max',
-      },
-    }),
-  },
-};
-
-export const ModeFull: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      mode: 'full',
-      winner: {
-        name: 'Ana Martínez',
-        ticketNumber: 789,
-        prize: 'MacBook Pro 14"',
-        prizeDescription: 'Laptop Apple M3 Pro, 18GB RAM',
-        prizeValue: 45000,
-        location: 'Guadalajara, México',
-        avatar: {
-          image: 'https://i.pravatar.cc/150?img=5',
-          default: 'https://i.pravatar.cc/150?img=0',
-          size: 'large',
-        },
-        prizeImage: 'https://picsum.photos/seed/macbook/200/200',
-      },
-    }),
-  },
-};
-
-export const ModeCelebration: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      mode: 'celebration',
-      showConfetti: true,
-      winner: {
-        name: 'Roberto Sánchez',
-        ticketNumber: 42,
-        prize: 'Tesla Model 3',
-        prizeValue: 850000,
-        location: 'Monterrey, México',
-        avatar: {
-          image: 'https://i.pravatar.cc/150?img=12',
-          default: 'https://i.pravatar.cc/150?img=0',
-          size: 'large',
-        },
-      },
-      animation: 'zoom',
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Full celebration mode with confetti and animations.',
-      },
-    },
-  },
-};
-
-export const AnimationFade: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      animation: 'fade',
-      autoPlay: true,
-    }),
-  },
-};
-
-export const AnimationZoom: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      animation: 'zoom',
-      autoPlay: true,
-    }),
-  },
-};
-
-export const AnimationSlide: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      animation: 'slide',
-      autoPlay: true,
-    }),
-  },
-};
-
-export const AnimationSpotlight: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      animation: 'spotlight',
-      autoPlay: true,
-    }),
-  },
-};
-
-export const WithConfetti: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      mode: 'full',
-      showConfetti: true,
-      animation: 'zoom',
-      winner: {
-        name: 'Laura González',
-        ticketNumber: 333,
-        prize: 'Viaje a Cancún',
-        prizeValue: 35000,
-      },
-    }),
-  },
-};
-
-export const SizeSmall: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      size: 'small',
-      mode: 'compact',
-    }),
-  },
-};
-
-export const SizeLarge: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      size: 'large',
-      winner: {
-        name: 'Pedro Hernández',
-        ticketNumber: 999,
-        prize: 'Grand Prize',
-        prizeValue: 100000,
-      },
-    }),
-  },
-};
-
-export const BackgroundGradient: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      background: 'gradient',
-      winner: {
-        name: 'Sofía Morales',
-        ticketNumber: 777,
-        prize: 'iPhone 15',
-      },
-    }),
-  },
-};
-
-export const BackgroundTransparent: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      background: 'transparent',
-    }),
-  },
-};
-
-export const WithPaddedNumber: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      numberPadding: 4,
-      winner: {
-        name: 'Miguel Torres',
-        ticketNumber: 42,
-        prize: 'Smart TV 55"',
-      },
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Ticket number is padded (e.g., 0042).',
-      },
-    },
-  },
-};
-
-export const CustomLabels: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      winnerLabel: '🎉 Congratulations!',
-      ticketLabel: 'Lucky Number: ',
-      prizeLabel: 'You won:',
-      winner: {
-        name: 'John Smith',
-        ticketNumber: 123,
-        prize: '$10,000 Cash',
-      },
-    }),
-  },
-};
-
-export const ColorDanger: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      color: 'danger',
-      winner: {
-        name: 'Emma Wilson',
-        ticketNumber: 666,
-        prize: 'Mystery Box',
-      },
-    }),
-  },
-};
-
-export const ColorSuccess: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      color: 'success',
-      winner: {
-        name: 'David Chen',
-        ticketNumber: 888,
-        prize: 'Lucky Draw',
-      },
-    }),
-  },
-};
-
-export const DelayedReveal: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      revealDelay: 2000,
-      animation: 'spotlight',
-      winner: {
-        name: 'Mystery Winner',
-        ticketNumber: 1,
-        prize: 'Grand Prize',
-      },
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Animation starts after 2 second delay for suspense.',
-      },
-    },
-  },
-};
-
-export const GrandPrizeWinner: Story = {
-  args: {
-    props: createWinnerDisplayProps({
-      mode: 'celebration',
-      size: 'large',
-      showConfetti: true,
-      animation: 'zoom',
-      background: 'gradient',
-      color: 'warning',
-      winner: {
-        name: 'Alejandra Fernández',
-        ticketNumber: 1000,
-        prize: 'Tesla Model 3',
-        prizeDescription: 'Automóvil eléctrico Tesla Model 3 2024',
-        prizeValue: 950000,
-        prizeImage: 'https://picsum.photos/seed/tesla/300/200',
-        location: 'Ciudad de México',
-        avatar: {
-          image: 'https://i.pravatar.cc/150?img=47',
-          default: 'https://i.pravatar.cc/150?img=0',
-          size: 'large',
-        },
-      },
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Complete grand prize winner announcement.',
-      },
-    },
-  },
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 40px;">
-        <div>
-          <h3 style="margin: 0 0 16px; font-family: system-ui;">Compact Mode</h3>
-          <val-winner-display [props]="compact"></val-winner-display>
-        </div>
-
-        <div>
-          <h3 style="margin: 0 0 16px; font-family: system-ui;">Standard Mode</h3>
-          <val-winner-display [props]="standard"></val-winner-display>
-        </div>
-
-        <div>
-          <h3 style="margin: 0 0 16px; font-family: system-ui;">Full Mode with Prize</h3>
-          <val-winner-display [props]="full"></val-winner-display>
-        </div>
-
-        <div>
-          <h3 style="margin: 0 0 16px; font-family: system-ui;">Celebration Mode</h3>
-          <val-winner-display [props]="celebration"></val-winner-display>
-        </div>
-      </div>
-    `,
-    props: {
-      compact: createWinnerDisplayProps({ mode: 'compact' }),
-      standard: createWinnerDisplayProps({
-        mode: 'standard',
-        winner: {
-          name: 'Juan Pérez',
-          ticketNumber: 156,
-          prize: 'iPhone 15',
-        },
-      }),
-      full: createWinnerDisplayProps({
-        mode: 'full',
-        winner: {
-          name: 'María López',
-          ticketNumber: 789,
-          prize: 'MacBook Pro',
-          prizeValue: 45000,
-          location: 'CDMX',
-          avatar: { image: 'https://i.pravatar.cc/150?img=5', default: 'https://i.pravatar.cc/150?img=0', size: 'large' },
-        },
-      }),
-      celebration: createWinnerDisplayProps({
-        mode: 'celebration',
-        showConfetti: true,
-        animation: 'zoom',
-        winner: {
-          name: 'Carlos García',
-          ticketNumber: 42,
-          prize: 'Grand Prize',
-          prizeValue: 100000,
-        },
-      }),
-    },
-  }),
-};