siesa-ui-kit 1.0.2 → 1.0.3

package/src/views/ProductsView/ProductsView.stories.tsx

@@ -1,344 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ProductsView } from './ProductsView';
-import type { ProductCategory, Product, OrderItem, Menu } from './ProductsView.types';
-
-const meta = {
-  title: 'Siesa UI Kit/Views/ProductsView',
-  component: ProductsView,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Vista completa de selección de productos para sistema POS. Incluye categorías, grid de productos, carrito de pedido con resumen de precios.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof ProductsView>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ===== DATOS DE PRUEBA =====
-const sampleMenus: Menu[] = [
-  { id: '1', label: 'Corral' },
-  { id: '2', label: 'Burguer One' },
-  { id: '3', label: 'Andrés Carne de Res' },
-  { id: '4', label: 'Aceites' },
-  { id: '5', label: 'Kiosco Mac' },
-  { id: '6', label: 'Kiosco Qbano' },
-  { id: '7', label: 'Premier Dinning' },
-];
-
-const sampleCategories: ProductCategory[] = [
-  {
-    id: '1',
-    label: 'Al Horno',
-    image: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=300&h=150&fit=crop',
-  },
-  {
-    id: '2',
-    label: 'A la Plancha',
-    image: 'https://images.unsplash.com/photo-1432139555190-58524dae6a55?w=300&h=150&fit=crop',
-  },
-  {
-    id: '3',
-    label: 'Hamburguesas',
-    image: 'https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=300&h=150&fit=crop',
-  },
-  {
-    id: '4',
-    label: 'Bebidas',
-    image: 'https://images.unsplash.com/photo-1437418747212-8d9709afab22?w=300&h=150&fit=crop',
-  },
-  {
-    id: '5',
-    label: 'Combos',
-    image: 'https://images.unsplash.com/photo-1513104890138-7c749659a591?w=300&h=150&fit=crop',
-  },
-];
-
-const sampleProducts: Product[] = [
-  {
-    id: '1',
-    name: 'Nombre producto',
-    price: '$ 40.000',
-    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&h=200&fit=crop',
-    categoryId: '1',
-  },
-  {
-    id: '2',
-    name: 'Nombre producto',
-    price: '$ 40.000',
-    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&h=200&fit=crop',
-    categoryId: '1',
-  },
-  {
-    id: '3',
-    name: 'Nombre producto',
-    price: '$ 40.000',
-    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&h=200&fit=crop',
-    categoryId: '1',
-  },
-  {
-    id: '4',
-    name: 'Nombre producto',
-    price: '$ 40.000',
-    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&h=200&fit=crop',
-    categoryId: '1',
-  },
-  {
-    id: '5',
-    name: 'Nombre producto',
-    price: '$ 40.000',
-    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&h=200&fit=crop',
-    categoryId: '1',
-  },
-  {
-    id: '6',
-    name: 'Nombre producto',
-    price: '$ 40.000',
-    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&h=200&fit=crop',
-    categoryId: '1',
-  },
-  {
-    id: '7',
-    name: 'Nombre producto',
-    price: '$ 40.000',
-    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&h=200&fit=crop',
-    categoryId: '1',
-  },
-  {
-    id: '8',
-    name: 'Nombre producto',
-    price: '$ 40.000',
-    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&h=200&fit=crop',
-    categoryId: '1',
-  },
-  {
-    id: '9',
-    name: 'Nombre producto',
-    price: '$ 40.000',
-    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&h=200&fit=crop',
-    categoryId: '1',
-  },
-  {
-    id: '10',
-    name: 'Nombre producto',
-    price: '$ 40.000',
-    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&h=200&fit=crop',
-    categoryId: '1',
-  },
-  {
-    id: '11',
-    name: 'Nombre producto',
-    price: '$ 40.000',
-    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&h=200&fit=crop',
-    categoryId: '1',
-  },
-  {
-    id: '12',
-    name: 'Nombre producto',
-    price: '$ 40.000',
-    image: 'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=200&h=200&fit=crop',
-    categoryId: '1',
-  },
-];
-
-const sampleOrderItems: OrderItem[] = [
-  {
-    productId: '1',
-    productName: 'Nombre producto',
-    categoryLabel: 'Entradas',
-    categoryColor: 'lime',
-    productRef: '00147258369',
-    price: '$ 40,000.00',
-    quantity: 1,
-    descriptionItems: [
-      { description: 'Papas limón mediana', price: '$ 40,000.00' },
-      { description: 'Tocineta', price: '$ 40,000.00' },
-    ],
-  },
-  {
-    productId: '2',
-    productName: 'Nombre producto',
-    categoryLabel: 'Entradas',
-    categoryColor: 'lime',
-    productRef: '00147258369',
-    price: '$ 40,000.00',
-    quantity: 2,
-  },
-  {
-    productId: '3',
-    productName: 'Nombre producto',
-    categoryLabel: 'Entradas',
-    categoryColor: 'lime',
-    productRef: '00147258369',
-    price: '$ 40,000.00',
-    quantity: 1,
-  },
-];
-
-const sampleUserInfo = {
-  avatar: 'https://i.pravatar.cc/150?img=12',
-  name: 'Jhonnatan Diaz',
-  role: 'Administrador',
-};
-
-// ============================================
-// 1. VISTA COMPLETA
-// ============================================
-export const VistaCompleta: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <ProductsView
-        tableTitle="Mesa 1"
-        menus={sampleMenus}
-        selectedMenuId="1"
-        categories={sampleCategories}
-        selectedCategoryId="1"
-        products={sampleProducts}
-        orderItems={sampleOrderItems}
-        subtotal="40,000.00"
-        taxes="40,000.00"
-        total="40,000.00"
-        userAvatar={sampleUserInfo.avatar}
-        userName={sampleUserInfo.name}
-        userRole={sampleUserInfo.role}
-        onMenuSelect={(id) => console.log('Menú seleccionado:', id)}
-        onCategorySelect={(id) => console.log('Categoría seleccionada:', id)}
-        onAddProduct={(id) => console.log('Agregar producto:', id)}
-        onOrderItemQuantityChange={(id, qty) => console.log('Cambiar cantidad:', id, qty)}
-        onOrderItemDelete={(id) => console.log('Eliminar item:', id)}
-        onConfirmOrder={() => console.log('Confirmar pedido')}
-        onChangeTable={() => console.log('Cambiar mesa')}
-        onTabChange={(tab) => console.log('Cambiar tab:', tab)}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 2. PEDIDO VACÍO
-// ============================================
-export const PedidoVacio: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <ProductsView
-        tableTitle="Mesa 1"
-        menus={sampleMenus}
-        selectedMenuId="1"
-        categories={sampleCategories}
-        selectedCategoryId="1"
-        products={sampleProducts}
-        orderItems={[]}
-        subtotal="0.00"
-        taxes="0.00"
-        total="0.00"
-        userAvatar={sampleUserInfo.avatar}
-        userName={sampleUserInfo.name}
-        userRole={sampleUserInfo.role}
-        onMenuSelect={(id) => console.log('Menú seleccionado:', id)}
-        onCategorySelect={(id) => console.log('Categoría seleccionada:', id)}
-        onAddProduct={(id) => console.log('Agregar producto:', id)}
-        onConfirmOrder={() => console.log('Confirmar pedido')}
-        onChangeTable={() => console.log('Cambiar mesa')}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 3. CARGANDO PRODUCTOS
-// ============================================
-export const CargandoProductos: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <ProductsView
-        tableTitle="Mesa 1"
-        menus={sampleMenus}
-        selectedMenuId="1"
-        categories={sampleCategories}
-        selectedCategoryId="1"
-        products={[]}
-        orderItems={sampleOrderItems}
-        isLoading={true}
-        subtotal="40,000.00"
-        taxes="40,000.00"
-        total="40,000.00"
-        userAvatar={sampleUserInfo.avatar}
-        userName={sampleUserInfo.name}
-        userRole={sampleUserInfo.role}
-        onMenuSelect={(id) => console.log('Menú seleccionado:', id)}
-        onCategorySelect={(id) => console.log('Categoría seleccionada:', id)}
-        onAddProduct={(id) => console.log('Agregar producto:', id)}
-        onConfirmOrder={() => console.log('Confirmar pedido')}
-        onChangeTable={() => console.log('Cambiar mesa')}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 4. ERROR AL CARGAR PRODUCTOS
-// ============================================
-export const ErrorAlCargar: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <ProductsView
-        tableTitle="Mesa 1"
-        menus={sampleMenus}
-        selectedMenuId="1"
-        categories={sampleCategories}
-        selectedCategoryId="1"
-        products={[]}
-        orderItems={sampleOrderItems}
-        errorMessage="Error al cargar los productos. Por favor, intente nuevamente."
-        subtotal="40,000.00"
-        taxes="40,000.00"
-        total="40,000.00"
-        userAvatar={sampleUserInfo.avatar}
-        userName={sampleUserInfo.name}
-        userRole={sampleUserInfo.role}
-        onMenuSelect={(id) => console.log('Menú seleccionado:', id)}
-        onCategorySelect={(id) => console.log('Categoría seleccionada:', id)}
-        onAddProduct={(id) => console.log('Agregar producto:', id)}
-        onConfirmOrder={() => console.log('Confirmar pedido')}
-        onChangeTable={() => console.log('Cambiar mesa')}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 5. TAB CLIENTE ACTIVO
-// ============================================
-export const TabClienteActivo: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <ProductsView
-        tableTitle="Mesa 1"
-        menus={sampleMenus}
-        selectedMenuId="1"
-        categories={sampleCategories}
-        selectedCategoryId="1"
-        products={sampleProducts}
-        orderItems={sampleOrderItems}
-        activeTab="client"
-        subtotal="40,000.00"
-        taxes="40,000.00"
-        total="40,000.00"
-        userAvatar={sampleUserInfo.avatar}
-        userName={sampleUserInfo.name}
-        userRole={sampleUserInfo.role}
-        onMenuSelect={(id) => console.log('Menú seleccionado:', id)}
-        onCategorySelect={(id) => console.log('Categoría seleccionada:', id)}
-        onAddProduct={(id) => console.log('Agregar producto:', id)}
-        onTabChange={(tab) => console.log('Cambiar tab:', tab)}
-        onConfirmOrder={() => console.log('Confirmar pedido')}
-        onChangeTable={() => console.log('Cambiar mesa')}
-      />
-    </div>
-  ),
-};