siesa-ui-kit 1.0.2 → 1.0.4

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

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