siesa-ui-kit 1.0.1 → 1.0.2

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

@@ -0,0 +1,344 @@
+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>
+  ),
+};