@dropi/ui-components 1.0.0

package/src/components-source/card-product/card-product.component.stories.ts

@@ -0,0 +1,322 @@
+/**
+ * @fileoverview Card Product component stories for Storybook
+ * @description A product card component for e-commerce displays with supplier info, pricing, and actions
+ */
+import { moduleMetadata } from '@storybook/angular';
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { CardProductComponent, ProductData } from './card-product.component';
+import { SettingsService } from '../../services/setting.service';
+import { ProductstService } from '@app/pages/service/products/products.service';
+import { OrderManualService } from '@app/services/order-manual.service';
+import { Router } from '@angular/router';
+import { of } from 'rxjs';
+
+const meta: Meta<CardProductComponent> = {
+  title: 'UI Dropi/Card Product',
+  component: CardProductComponent,
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: SettingsService,
+          useValue: {
+            getBrandInfo: () => ({ name: 'dropi' }),
+            dropi_loginResult: {
+              configurations: [
+                {
+                  official_currency: 'COP',
+                  digits_info_currency: '1.0-0',
+                },
+              ],
+            },
+          },
+        },
+        {
+          provide: ProductstService,
+          useValue: {
+            addFavoriteProduct: (body: any) => of({ is_successful: true }),
+            removeFavoriteProduct: (body: any) => of({ is_successful: true }),
+          },
+        },
+        {
+          provide: OrderManualService,
+          useValue: {
+            setModalOpen: (isOpen: boolean) => {},
+            clearProductsIds: () => {},
+            setProductsIds: (productId: number) => {},
+          },
+        },
+        {
+          provide: Router,
+          useValue: {
+            url: '/storybook',
+            navigate: (commands: any[]) => Promise.resolve(true),
+          },
+        },
+      ],
+    }),
+  ],
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=1059-583&m=dev',
+    },
+  },
+  argTypes: {
+    product: {
+      description: 'Product data to display in the card',
+      table: { category: 'Data' },
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'hover', 'select'],
+      description: 'Visual state of the card',
+      table: { category: 'State' },
+    },
+    onAddToCart: {
+      action: 'onAddToCart',
+      description: 'Event emitted when "Send to customer" button is clicked',
+      table: { category: 'Events' },
+    },
+    onProductClick: {
+      action: 'onProductClick',
+      description: 'Event emitted when the product card is clicked',
+      table: { category: 'Events' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<CardProductComponent>;
+
+// Datos de ejemplo que coinciden con la estructura real de la API
+const mockProduct: ProductData = {
+  id: 503942,
+  sku: 'PRC159-10',
+  name: 'PROMO - 27 (3 PERFUMES)CABALLERO',
+  type: 'SIMPLE',
+  sale_price: 117000,
+  suggested_price: 200000,
+  private_product: false,
+  variation_stock: 0,
+  stock_simple: 2000,
+  is_variation: false,
+  favorite: false,
+  supplier: {
+    id: 118707,
+    name: 'PERFUMERIA',
+    category_user: 'VERIFICADO',
+    icon: 'verified' as 'verified' | 'premium' | 'exclusive',
+  },
+  categories: [
+    {
+      name: 'Moda',
+    },
+    {
+      name: 'Belleza',
+    },
+    {
+      name: 'Otro',
+    },
+  ],
+  private_user_stock: 0,
+  legacy_img: false,
+  image:
+    'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
+  // Campos de compatibilidad
+  category: 'Moda',
+  stock: 2000,
+  supplierPrice: 117000,
+  suggestedPrice: 200000,
+  imageUrl:
+    'https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
+  isFavorite: false,
+};
+
+const mockProductWithFavorite: ProductData = {
+  ...mockProduct,
+  favorite: true,
+  isFavorite: true,
+};
+
+const mockProductLowStock: ProductData = {
+  ...mockProduct,
+  id: 503943,
+  sku: 'PRC159-11',
+  name: 'Nike Air Max Running Shoes',
+  stock_simple: 5,
+  stock: 5,
+  type: 'VARIABLE',
+  sale_price: 85000,
+  suggested_price: 150000,
+  supplierPrice: 85000,
+  suggestedPrice: 150000,
+  supplier: {
+    id: 118708,
+    name: 'NIKE STORE',
+    category_user: 'PREMIUM',
+    icon: 'premium' as 'verified' | 'premium' | 'exclusive',
+  },
+};
+
+const mockProductNoStock: ProductData = {
+  ...mockProduct,
+  id: 503944,
+  sku: 'PRC159-12',
+  name: 'Producto Agotado',
+  stock_simple: 0,
+  stock: 0,
+  type: 'SIMPLE',
+  private_product: true,
+  sale_price: 45000,
+  suggested_price: 90000,
+  supplierPrice: 45000,
+  suggestedPrice: 90000,
+  supplier: {
+    id: 118709,
+    name: 'TIENDA OUTLET',
+    category_user: 'BASICO',
+    icon: 'verified' as 'verified' | 'premium' | 'exclusive',
+  },
+};
+
+// Nuevos productos mock para mostrar diferentes tipos de iconos
+const mockProductExclusive: ProductData = {
+  ...mockProduct,
+  id: 503945,
+  sku: 'PRC159-13',
+  name: 'Producto Exclusivo Premium',
+  sale_price: 250000,
+  suggested_price: 400000,
+  supplierPrice: 250000,
+  suggestedPrice: 400000,
+  supplier: {
+    id: 118710,
+    name: 'EXCLUSIVE BRANDS',
+    category_user: 'EXCLUSIVE',
+    icon: 'exclusive' as 'verified' | 'premium' | 'exclusive',
+  },
+};
+
+const mockProductWithoutIcon: ProductData = {
+  ...mockProduct,
+  id: 503946,
+  sku: 'PRC159-14',
+  name: 'Producto Sin Icono',
+  supplier: {
+    id: 118711,
+    name: 'PROVEEDOR BÁSICO',
+    category_user: 'BASICO',
+    // Sin campo icon
+  },
+};
+
+export const Default: Story = {
+  args: {
+    product: mockProduct,
+    state: 'default',
+  },
+};
+
+export const Hover: Story = {
+  args: {
+    product: mockProduct,
+    state: 'hover',
+  },
+};
+
+export const Select: Story = {
+  args: {
+    product: mockProduct,
+    state: 'select',
+  },
+};
+
+export const WithFavorite: Story = {
+  args: {
+    product: mockProductWithFavorite,
+    state: 'default',
+  },
+};
+
+// Nuevas stories para mostrar diferentes tipos de iconos
+export const VerifiedSupplier: Story = {
+  args: {
+    product: mockProduct,
+    state: 'default',
+  },
+};
+
+export const PremiumSupplier: Story = {
+  args: {
+    product: mockProductLowStock,
+    state: 'default',
+  },
+};
+
+export const ExclusiveSupplier: Story = {
+  args: {
+    product: mockProductExclusive,
+    state: 'default',
+  },
+};
+
+export const SupplierWithoutIcon: Story = {
+  args: {
+    product: mockProductWithoutIcon,
+    state: 'default',
+  },
+};
+
+// Story que muestra múltiples tarjetas en un grid
+export const Grid: Story = {
+  render: () => ({
+    template: `
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 1200px;">
+        <dropi-card-product [product]="product1" state="default"></dropi-card-product>
+        <dropi-card-product [product]="product2" state="hover"></dropi-card-product>
+        <dropi-card-product [product]="product3" state="select"></dropi-card-product>
+        <dropi-card-product [product]="product4" state="default"></dropi-card-product>
+        <dropi-card-product [product]="product5" state="default"></dropi-card-product>
+        <dropi-card-product [product]="product6" state="default"></dropi-card-product>
+      </div>
+    `,
+    props: {
+      product1: mockProduct, // verified
+      product2: mockProductLowStock, // premium
+      product3: mockProductExclusive, // exclusive
+      product4: mockProductWithoutIcon, // sin icono
+      product5: mockProductWithFavorite, // verified con favorito
+      product6: mockProductNoStock, // verified sin stock
+    },
+  }),
+};
+
+// Story específica para mostrar todos los tipos de iconos de proveedor
+export const SupplierIcons: Story = {
+  render: () => ({
+    template: `
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 900px;">
+        <div style="text-align: center;">
+          <h4 style="margin-bottom: 12px; color: #32394d;">Verified</h4>
+          <dropi-card-product [product]="verifiedProduct" state="default"></dropi-card-product>
+        </div>
+        <div style="text-align: center;">
+          <h4 style="margin-bottom: 12px; color: #32394d;">Premium</h4>
+          <dropi-card-product [product]="premiumProduct" state="default"></dropi-card-product>
+        </div>
+        <div style="text-align: center;">
+          <h4 style="margin-bottom: 12px; color: #32394d;">Exclusive</h4>
+          <dropi-card-product [product]="exclusiveProduct" state="default"></dropi-card-product>
+        </div>
+      </div>
+    `,
+    props: {
+      verifiedProduct: mockProduct,
+      premiumProduct: mockProductLowStock,
+      exclusiveProduct: mockProductExclusive,
+    },
+  }),
+};