valtech-components 2.0.691 → 2.0.692

package/src/lib/components/molecules/raffle-status-card/raffle-status-card.stories.ts

@@ -1,509 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { RaffleStatusCardComponent } from './raffle-status-card.component';
-import { RaffleStatusCardMetadata, RaffleStatus } from './types';
-import { createButtonProps } from '../../../../stories/helpers/storybook-helpers';
-
-// Helper to create future dates
-const getFutureDate = (days: number): Date => {
-  const date = new Date();
-  date.setDate(date.getDate() + days);
-  return date;
-};
-
-const getPastDate = (days: number): Date => {
-  const date = new Date();
-  date.setDate(date.getDate() - days);
-  return date;
-};
-
-const createRaffleStatusCardProps = (overrides: Partial<RaffleStatusCardMetadata> = {}): RaffleStatusCardMetadata => ({
-  title: 'iPhone 15 Pro Max',
-  description: 'Participa y gana el último iPhone de Apple',
-  status: 'active',
-  progress: {
-    totalTickets: 500,
-    soldTickets: 325,
-    reservedTickets: 25,
-  },
-  ticketPrice: 50,
-  currency: 'MXN',
-  currencySymbol: '$',
-  showProgress: true,
-  showTicketStats: true,
-  showPrice: true,
-  showStatusBadge: true,
-  ...overrides,
-});
-
-const meta: Meta<RaffleStatusCardComponent> = {
-  title: 'Molecules/RaffleStatusCard',
-  component: RaffleStatusCardComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, RaffleStatusCardComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Raffle status card configuration object',
-      control: 'object',
-      table: {
-        type: {
-          summary: 'RaffleStatusCardMetadata',
-          detail: `{
-  title: string;
-  description?: string;
-  status: RaffleStatus;
-  progress?: RaffleProgress;
-  prize?: RafflePrize;
-  coverImage?: ImageMetadata;
-  startDate?: Date | string;
-  endDate?: Date | string;
-  showCountdown?: boolean;
-  ticketPrice?: number;
-  currency?: string;
-  variant?: 'default' | 'featured' | 'compact' | 'horizontal';
-  size?: 'small' | 'medium' | 'large';
-  showProgress?: boolean;
-  showTicketStats?: boolean;
-  showPrice?: boolean;
-  primaryAction?: ButtonMetadata;
-  secondaryAction?: ButtonMetadata;
-}`,
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-raffle-status-card
-
-A card component displaying raffle status, progress, and key information.
-
-### Status Types
-
-- **upcoming**: Raffle not started yet
-- **active**: Currently selling tickets
-- **sold_out**: All tickets sold
-- **drawing**: Draw in progress
-- **completed**: Winner announced
-- **cancelled**: Raffle cancelled
-
-### Variants
-
-- **default**: Standard card layout
-- **featured**: Highlighted/promoted raffle
-- **compact**: Minimal display
-- **horizontal**: Side-by-side layout
-
-### Usage
-
-\`\`\`html
-<val-raffle-status-card
-  [props]="{
-    title: 'Win an iPhone!',
-    status: 'active',
-    progress: { totalTickets: 500, soldTickets: 250 },
-    ticketPrice: 50,
-    showCountdown: true,
-    endDate: '2024-12-31'
-  }"
-  (cardClick)="onCardClick($event)"
-></val-raffle-status-card>
-\`\`\`
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<RaffleStatusCardComponent>;
-
-export const Default: Story = {
-  args: {
-    props: createRaffleStatusCardProps(),
-  },
-};
-
-export const StatusUpcoming: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      status: 'upcoming',
-      title: 'Próxima Rifa: MacBook Pro',
-      startDate: getFutureDate(7),
-      progress: {
-        totalTickets: 1000,
-        soldTickets: 0,
-      },
-    }),
-  },
-};
-
-export const StatusActive: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      status: 'active',
-      showCountdown: true,
-      endDate: getFutureDate(14),
-    }),
-  },
-};
-
-export const StatusSoldOut: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      status: 'sold_out',
-      progress: {
-        totalTickets: 500,
-        soldTickets: 500,
-      },
-      endDate: getFutureDate(3),
-      showCountdown: true,
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'All tickets have been sold.',
-      },
-    },
-  },
-};
-
-export const StatusDrawing: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      status: 'drawing',
-      title: 'Sorteo en Progreso',
-      progress: {
-        totalTickets: 500,
-        soldTickets: 500,
-      },
-    }),
-  },
-};
-
-export const StatusCompleted: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      status: 'completed',
-      title: 'Rifa Finalizada',
-      progress: {
-        totalTickets: 500,
-        soldTickets: 500,
-      },
-      endDate: getPastDate(2),
-    }),
-  },
-};
-
-export const StatusCancelled: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      status: 'cancelled',
-      title: 'Rifa Cancelada',
-    }),
-  },
-};
-
-export const WithCoverImage: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      coverImage: {
-        src: 'https://picsum.photos/seed/iphone/400/200',
-        alt: 'iPhone 15 Pro',
-        mode: 'rounded',
-        shaded: false,
-        bordered: false,
-        size: 'large',
-      },
-    }),
-  },
-};
-
-export const WithPrizeInfo: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      prize: {
-        name: 'iPhone 15 Pro Max 256GB',
-        description: 'Color Titanio Natural, incluye AirPods Pro',
-        value: 35000,
-        currency: 'MXN',
-        image: {
-          src: 'https://picsum.photos/seed/prize/200/200',
-          alt: 'iPhone 15 Pro',
-          mode: 'rounded',
-          shaded: false,
-          bordered: false,
-          size: 'medium',
-        },
-      },
-    }),
-  },
-};
-
-export const WithBeneficiary: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      beneficiary: 'Fundación Ayuda México',
-      beneficiaryImage: {
-        src: 'https://picsum.photos/seed/charity/100/100',
-        alt: 'Fundación',
-        mode: 'circular',
-        shaded: false,
-        bordered: false,
-        size: 'small',
-      },
-    }),
-  },
-};
-
-export const WithCountdown: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      showCountdown: true,
-      endDate: getFutureDate(5),
-      showDates: true,
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Shows countdown timer to the raffle end date.',
-      },
-    },
-  },
-};
-
-export const VariantFeatured: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      variant: 'featured',
-      title: '🎉 Gran Rifa Navideña',
-      description: 'El sorteo más grande del año',
-      showCountdown: true,
-      endDate: getFutureDate(30),
-      prize: {
-        name: 'Tesla Model 3',
-        value: 950000,
-        currency: 'MXN',
-      },
-    }),
-  },
-};
-
-export const VariantCompact: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      variant: 'compact',
-    }),
-  },
-};
-
-export const VariantHorizontal: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      variant: 'horizontal',
-      coverImage: {
-        src: 'https://picsum.photos/seed/horizontal/200/200',
-        alt: 'Prize',
-        mode: 'rounded',
-        shaded: false,
-        bordered: false,
-        size: 'medium',
-      },
-    }),
-  },
-};
-
-export const SizeSmall: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      size: 'small',
-      variant: 'compact',
-    }),
-  },
-};
-
-export const SizeLarge: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      size: 'large',
-    }),
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      primaryAction: createButtonProps({ text: 'Comprar Boletos', color: 'primary', fill: 'solid' }),
-      secondaryAction: createButtonProps({ text: 'Ver Detalles', color: 'medium', fill: 'outline' }),
-    }),
-  },
-};
-
-export const WithMonetaryGoal: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      progress: {
-        totalTickets: 500,
-        soldTickets: 325,
-        goalAmount: 25000,
-        currentAmount: 16250,
-      },
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Shows monetary fundraising goal progress.',
-      },
-    },
-  },
-};
-
-export const HighProgress: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      progress: {
-        totalTickets: 500,
-        soldTickets: 475,
-        reservedTickets: 10,
-      },
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: '95% of tickets sold - creates urgency.',
-      },
-    },
-  },
-};
-
-export const LowProgress: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      progress: {
-        totalTickets: 500,
-        soldTickets: 50,
-      },
-    }),
-  },
-};
-
-export const CustomStatusLabels: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      statusLabels: {
-        active: '🔥 On Sale Now!',
-        upcoming: '⏰ Coming Soon',
-        sold_out: '🎫 Sold Out!',
-      },
-    }),
-  },
-};
-
-export const CharityRaffle: Story = {
-  args: {
-    props: createRaffleStatusCardProps({
-      title: 'Rifa Benéfica 2024',
-      description: 'Todos los fondos van a caridad',
-      status: 'active',
-      variant: 'featured',
-      beneficiary: 'Cruz Roja Mexicana',
-      beneficiaryImage: {
-        src: 'https://picsum.photos/seed/cruzroja/80/80',
-        alt: 'Cruz Roja',
-        mode: 'circular',
-        shaded: false,
-        bordered: false,
-        size: 'small',
-      },
-      prize: {
-        name: 'Viaje todo incluido a Cancún',
-        value: 45000,
-        currency: 'MXN',
-      },
-      progress: {
-        totalTickets: 1000,
-        soldTickets: 678,
-        goalAmount: 50000,
-        currentAmount: 33900,
-      },
-      ticketPrice: 50,
-      showCountdown: true,
-      endDate: getFutureDate(21),
-      primaryAction: createButtonProps({ text: '¡Participa Ahora!', color: 'success', fill: 'solid' }),
-    }),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Complete charity raffle card with all features.',
-      },
-    },
-  },
-};
-
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 32px; max-width: 600px;">
-        <h3 style="margin: 0; font-family: system-ui;">Status Variants</h3>
-        <div style="display: grid; gap: 16px;">
-          <val-raffle-status-card [props]="upcoming"></val-raffle-status-card>
-          <val-raffle-status-card [props]="active"></val-raffle-status-card>
-          <val-raffle-status-card [props]="soldOut"></val-raffle-status-card>
-          <val-raffle-status-card [props]="completed"></val-raffle-status-card>
-        </div>
-
-        <h3 style="margin: 0; font-family: system-ui;">Featured Raffle</h3>
-        <val-raffle-status-card [props]="featured"></val-raffle-status-card>
-
-        <h3 style="margin: 0; font-family: system-ui;">Compact Variant</h3>
-        <val-raffle-status-card [props]="compact"></val-raffle-status-card>
-      </div>
-    `,
-    props: {
-      upcoming: createRaffleStatusCardProps({
-        status: 'upcoming',
-        title: 'Próxima Rifa',
-        startDate: getFutureDate(7),
-        progress: { totalTickets: 500, soldTickets: 0 },
-      }),
-      active: createRaffleStatusCardProps({
-        status: 'active',
-        showCountdown: true,
-        endDate: getFutureDate(14),
-      }),
-      soldOut: createRaffleStatusCardProps({
-        status: 'sold_out',
-        progress: { totalTickets: 500, soldTickets: 500 },
-      }),
-      completed: createRaffleStatusCardProps({
-        status: 'completed',
-        title: 'Rifa Finalizada',
-        progress: { totalTickets: 500, soldTickets: 500 },
-      }),
-      featured: createRaffleStatusCardProps({
-        variant: 'featured',
-        title: '🎉 Gran Sorteo',
-        showCountdown: true,
-        endDate: getFutureDate(30),
-        prize: { name: 'Tesla Model 3', value: 950000 },
-        primaryAction: createButtonProps({ text: 'Participar', color: 'primary', fill: 'solid' }),
-      }),
-      compact: createRaffleStatusCardProps({
-        variant: 'compact',
-        title: 'Rifa Express',
-      }),
-    },
-  }),
-};

package/src/lib/components/molecules/raffle-status-card/types.ts

@@ -1,150 +0,0 @@
-import { Color } from '@ionic/core';
-import { ImageMetadata } from '../../atoms/image/types';
-import { ButtonMetadata } from '../../types';
-
-/**
- * Raffle status type.
- */
-export type RaffleStatus =
-  | 'upcoming'    // Not started yet
-  | 'active'      // Currently selling tickets
-  | 'sold_out'    // All tickets sold
-  | 'drawing'     // Draw in progress
-  | 'completed'   // Winner announced
-  | 'cancelled';  // Raffle cancelled
-
-/**
- * Raffle progress information.
- */
-export interface RaffleProgress {
-  /** Total tickets available */
-  totalTickets: number;
-  /** Tickets sold */
-  soldTickets: number;
-  /** Tickets reserved (not paid) */
-  reservedTickets?: number;
-  /** Goal amount (monetary) */
-  goalAmount?: number;
-  /** Current amount raised */
-  currentAmount?: number;
-}
-
-/**
- * Prize information for the raffle.
- */
-export interface RafflePrize {
-  /** Prize name */
-  name: string;
-  /** Prize description */
-  description?: string;
-  /** Prize image */
-  image?: ImageMetadata;
-  /** Prize value */
-  value?: number;
-  /** Currency for value */
-  currency?: string;
-}
-
-/**
- * Metadata for the raffle status card component.
- */
-export interface RaffleStatusCardMetadata {
-  /** Raffle title */
-  title: string;
-  /** Raffle description */
-  description?: string;
-  /** Current status */
-  status: RaffleStatus;
-  /** Progress information */
-  progress?: RaffleProgress;
-  /** Prize information */
-  prize?: RafflePrize;
-  /** Cover image */
-  coverImage?: ImageMetadata;
-
-  // === Dates ===
-  /** Raffle start date */
-  startDate?: Date | string;
-  /** Raffle end date / draw date */
-  endDate?: Date | string;
-  /** Show countdown to end date */
-  showCountdown?: boolean;
-
-  // === Pricing ===
-  /** Ticket price */
-  ticketPrice?: number;
-  /** Currency */
-  currency?: string;
-  /** Currency symbol */
-  currencySymbol?: string;
-
-  // === Display options ===
-  /** Card variant */
-  variant?: 'default' | 'featured' | 'compact' | 'horizontal';
-  /** Size */
-  size?: 'small' | 'medium' | 'large';
-  /** Show progress bar */
-  showProgress?: boolean;
-  /** Show ticket stats */
-  showTicketStats?: boolean;
-  /** Show price */
-  showPrice?: boolean;
-  /** Show dates */
-  showDates?: boolean;
-  /** Show status badge */
-  showStatusBadge?: boolean;
-
-  // === Actions ===
-  /** Primary action button */
-  primaryAction?: ButtonMetadata;
-  /** Secondary action button */
-  secondaryAction?: ButtonMetadata;
-
-  // === Styling ===
-  /** Custom CSS class */
-  cssClass?: string;
-  /** Status color override */
-  statusColor?: Color;
-
-  // === Beneficiary ===
-  /** Beneficiary name */
-  beneficiary?: string;
-  /** Beneficiary logo/image */
-  beneficiaryImage?: ImageMetadata;
-
-  // === Labels ===
-  /** Custom status labels */
-  statusLabels?: Partial<Record<RaffleStatus, string>>;
-
-  // === Reactive content ===
-  /** Content class for reactive content */
-  contentClass?: string;
-  /** Content key for title */
-  titleContentKey?: string;
-  /** Content key for description */
-  descriptionContentKey?: string;
-}
-
-/**
- * Default status labels.
- */
-export const DEFAULT_STATUS_LABELS: Record<RaffleStatus, string> = {
-  upcoming: 'Próximamente',
-  active: 'Activo',
-  sold_out: 'Agotado',
-  drawing: 'Sorteando',
-  completed: 'Finalizado',
-  cancelled: 'Cancelado',
-};
-
-/**
- * Default status colors.
- */
-export const DEFAULT_STATUS_COLORS: Record<RaffleStatus, Color> = {
-  upcoming: 'medium',
-  active: 'success',
-  sold_out: 'warning',
-  drawing: 'tertiary',
-  completed: 'primary',
-  cancelled: 'danger',
-};

package/src/lib/components/molecules/range-input/range-input.component.scss

@@ -1,15 +0,0 @@
-:host {
-  display: block;
-}
-
-ion-label {
-  margin-bottom: 8px;
-  display: block;
-  font-weight: 500;
-}
-
-ion-range {
-  --bar-height: 4px;
-  --bar-border-radius: 4px;
-  --knob-size: 20px;
-}