siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,555 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Pagination } from './Pagination';
+import { useState } from 'react';
+
+const meta = {
+  title: 'Siesa UI Kit/Pagination',
+  component: Pagination,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+El componente **Pagination** permite navegar entre múltiples páginas de contenido de manera intuitiva y accesible.
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    currentPage: {
+      control: 'number',
+      description: 'Página actual (basada en 1)',
+      table: {
+        defaultValue: { summary: '1' },
+      },
+    },
+    totalPages: {
+      control: 'number',
+      description: 'Número total de páginas',
+    },
+    onPageChange: {
+      action: 'page-changed',
+      description: 'Callback cuando cambia la página',
+    },
+    backText: {
+      control: 'text',
+      description: 'Texto del botón "Atrás"',
+      table: {
+        defaultValue: { summary: 'Atrás' },
+      },
+    },
+    nextText: {
+      control: 'text',
+      description: 'Texto del botón "Siguiente"',
+      table: {
+        defaultValue: { summary: 'Siguiente' },
+      },
+    },
+    siblingCount: {
+      control: 'number',
+      description: 'Número de páginas visibles alrededor de la actual',
+      table: {
+        defaultValue: { summary: '1' },
+      },
+    },
+    showBackButton: {
+      control: 'boolean',
+      description: 'Si se muestra el botón "Atrás"',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+    showNextButton: {
+      control: 'boolean',
+      description: 'Si se muestra el botón "Siguiente"',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    currentPage: 1,
+    totalPages: 66,
+    backText: 'Atrás',
+    nextText: 'Siguiente',
+    siblingCount: 1,
+    showBackButton: true,
+    showNextButton: true,
+  },
+};
+
+// ============================================
+// 2. INTERACTIVE DEMO (CON ESTADO)
+// ============================================
+export const DemoInteractivo: Story = {
+  name: 'Demo Interactivo',
+  args: { totalPages: 66 },
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const totalPages = 66;
+
+    return (
+      <div className="space-y-8 p-6">
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Demo Interactivo
+          </h3>
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={(page) => setCurrentPage(page)}
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
+            Página actual: <strong>{currentPage}</strong> de <strong>{totalPages}</strong>
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 3. DIFERENTES ESTADOS
+// ============================================
+export const DiferentesEstados: Story = {
+  name: 'Diferentes Estados',
+  args: { totalPages: 66 },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Primera página (Atrás deshabilitado) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Primera Página (Atrás deshabilitado)
+        </h3>
+        <Pagination currentPage={1} totalPages={66} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          El botón "Atrás" está deshabilitado en la primera página
+        </p>
+      </div>
+
+      {/* Página intermedia */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Página Intermedia
+        </h3>
+        <Pagination currentPage={5} totalPages={66} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Ambos botones activos, con puntos suspensivos en ambos lados
+        </p>
+      </div>
+
+      {/* Última página (Siguiente deshabilitado) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Última Página (Siguiente deshabilitado)
+        </h3>
+        <Pagination currentPage={66} totalPages={66} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          El botón "Siguiente" está deshabilitado en la última página
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. DIFERENTES CANTIDADES DE PÁGINAS
+// ============================================
+export const DiferentesConteosDePaginas: Story = {
+  name: 'Diferentes Cantidades de Páginas',
+  args: { totalPages: 100 },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Pocas páginas (sin puntos suspensivos) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Pocas Páginas (5 páginas)
+        </h3>
+        <Pagination currentPage={3} totalPages={5} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Se muestran todas las páginas sin separadores
+        </p>
+      </div>
+
+      {/* Páginas medias */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Páginas Medias (20 páginas)
+        </h3>
+        <Pagination currentPage={10} totalPages={20} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Separadores en ambos lados
+        </p>
+      </div>
+
+      {/* Muchas páginas */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Muchas Páginas (100 páginas)
+        </h3>
+        <Pagination currentPage={50} totalPages={100} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Algoritmo inteligente para mostrar páginas relevantes
+        </p>
+      </div>
+
+      {/* Solo 1 página */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Una Sola Página
+        </h3>
+        <Pagination currentPage={1} totalPages={1} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Ambos botones deshabilitados cuando solo hay una página
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. SIBLING COUNT
+// ============================================
+export const PaginasAdyacentes: Story = {
+  name: 'Páginas Adyacentes (siblingCount)',
+  args: { totalPages: 66 },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* siblingCount = 0 */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          siblingCount = 0
+        </h3>
+        <Pagination currentPage={10} totalPages={66} siblingCount={0} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Solo muestra la página actual (más compacto)
+        </p>
+      </div>
+
+      {/* siblingCount = 1 (predeterminado) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          siblingCount = 1 (predeterminado)
+        </h3>
+        <Pagination currentPage={10} totalPages={66} siblingCount={1} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Muestra la página actual + 1 a cada lado
+        </p>
+      </div>
+
+      {/* siblingCount = 2 */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          siblingCount = 2
+        </h3>
+        <Pagination currentPage={10} totalPages={66} siblingCount={2} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Muestra la página actual + 2 a cada lado (más páginas visibles)
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. TEXTOS PERSONALIZADOS
+// ============================================
+export const TextosPersonalizados: Story = {
+  name: 'Textos Personalizados',
+  args: { totalPages: 66 },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Español */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Español (Predeterminado)
+        </h3>
+        <Pagination
+          currentPage={5}
+          totalPages={66}
+          backText="Atrás"
+          nextText="Siguiente"
+        />
+      </div>
+
+      {/* Inglés */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Inglés
+        </h3>
+        <Pagination currentPage={5} totalPages={66} backText="Back" nextText="Next" />
+      </div>
+
+      {/* Portugués */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Portugués
+        </h3>
+        <Pagination
+          currentPage={5}
+          totalPages={66}
+          backText="Voltar"
+          nextText="Próxima"
+        />
+      </div>
+
+      {/* Francés */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Francés
+        </h3>
+        <Pagination
+          currentPage={5}
+          totalPages={66}
+          backText="Précédent"
+          nextText="Suivant"
+        />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 7. SIN BOTONES ATRÁS/SIGUIENTE
+// ============================================
+export const SinBotonesAtrasAdelante: Story = {
+  name: 'Sin Botones Atrás/Siguiente',
+  args: { totalPages: 66 },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Sin botón Atrás */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Sin Botón "Atrás"
+        </h3>
+        <Pagination currentPage={5} totalPages={66} showBackButton={false} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Solo se muestran los números y el botón "Siguiente"
+        </p>
+      </div>
+
+      {/* Sin botón Siguiente */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Sin Botón "Siguiente"
+        </h3>
+        <Pagination currentPage={5} totalPages={66} showNextButton={false} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Solo se muestran el botón "Atrás" y los números
+        </p>
+      </div>
+
+      {/* Solo números */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Solo Números
+        </h3>
+        <Pagination
+          currentPage={5}
+          totalPages={66}
+          showBackButton={false}
+          showNextButton={false}
+          backText="Atrás"
+          nextText="Siguiente"
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Solo los números de página (más minimalista)
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 8. USO CON TABLA
+// ============================================
+export const WithTable: Story = {
+  name: 'Uso con Tabla',
+  args: { totalPages: 16 },
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 10;
+    const totalItems = 156;
+    const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+    const startItem = (currentPage - 1) * itemsPerPage + 1;
+    const endItem = Math.min(currentPage * itemsPerPage, totalItems);
+
+    return (
+      <div className="space-y-6 p-6 max-w-4xl">
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Tabla con Paginación
+          </h3>
+
+          {/* Tabla simple */}
+          <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+            <table className="w-full">
+              <thead className="bg-gray-50 dark:bg-gray-800">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-bold text-gray-700 dark:text-white">
+                    ID
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-bold text-gray-700 dark:text-white">
+                    Nombre
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-bold text-gray-700 dark:text-white">
+                    Email
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-bold text-gray-700 dark:text-white">
+                    Estado
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                {Array.from({ length: itemsPerPage }, (_, i) => {
+                  const itemId = startItem + i;
+                  if (itemId > totalItems) return null;
+                  return (
+                    <tr key={itemId} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                      <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
+                        #{itemId}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
+                        Usuario {itemId}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
+                        user{itemId}@example.com
+                      </td>
+                      <td className="px-4 py-3 text-sm">
+                        <span className="px-2 py-1 text-xs font-bold rounded bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
+                          Activo
+                        </span>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Info y paginación */}
+          <div className="flex items-center justify-between mt-4">
+            <p className="text-xs text-gray-500 dark:text-gray-300">
+              Mostrando <strong>{startItem}</strong> a <strong>{endItem}</strong> de{' '}
+              <strong>{totalItems}</strong> resultados
+            </p>
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={setCurrentPage}
+              backText="Atrás"
+              nextText="Siguiente"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 9. CONSEJOS Y TIPS
+// ============================================
+export const Tips: Story = {
+  name: 'Consejos y Buenas Prácticas',
+  args: { totalPages: 1 },
+  render: () => (
+    <div className="space-y-6 p-6 max-w-2xl">
+      <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+        <h4 className="text-sm font-bold mb-2 text-gray-700 dark:text-white">
+          💡 Consejos de Uso
+        </h4>
+        <ul className="space-y-2 text-xs text-gray-600 dark:text-gray-300">
+          <li>
+            • <strong>currentPage</strong> está basado en 1 (no en 0). La primera página
+            es 1, no 0.
+          </li>
+          <li>
+            • Usa <code className="px-1 bg-white dark:bg-gray-700">siblingCount=1</code>{' '}
+            para dispositivos móviles (más compacto).
+          </li>
+          <li>
+            • Usa <code className="px-1 bg-white dark:bg-gray-700">siblingCount=2</code>{' '}
+            para desktop (más páginas visibles).
+          </li>
+          <li>
+            • El algoritmo muestra siempre la primera y última página para facilitar la
+            navegación.
+          </li>
+          <li>
+            • Los separadores "..." indican que hay páginas ocultas entre los números
+            visibles.
+          </li>
+          <li>
+            • Puedes personalizar los textos de "Back" y "Next" para
+            internacionalización.
+          </li>
+          <li>
+            • Implementa <code className="px-1 bg-white dark:bg-gray-700">onPageChange</code>{' '}
+            para actualizar tu contenido cuando cambie la página.
+          </li>
+        </ul>
+      </div>
+
+      <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+        <h4 className="text-sm font-bold mb-2 text-gray-700 dark:text-white">
+          ✅ Mejores Prácticas
+        </h4>
+        <ul className="space-y-2 text-xs text-gray-600 dark:text-gray-300">
+          <li>
+            • Coloca la paginación al final del contenido (después de tablas o listas).
+          </li>
+          <li>
+            • Muestra información de contexto: "Mostrando X a Y de Z resultados".
+          </li>
+          <li>
+            • Considera agregar un selector de "items por página" junto a la
+            paginación.
+          </li>
+          <li>
+            • Mantén el scroll en la parte superior del contenido al cambiar de página.
+          </li>
+          <li>
+            • Usa loading states mientras se carga el nuevo contenido.
+          </li>
+        </ul>
+      </div>
+
+      <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+        <h4 className="text-sm font-bold mb-2 text-gray-700 dark:text-white">
+          ⚠️ Evitar
+        </h4>
+        <ul className="space-y-2 text-xs text-gray-600 dark:text-gray-300">
+          <li>
+            • No uses valores de <code className="px-1 bg-white dark:bg-gray-700">currentPage</code>{' '}
+            basados en 0 (puede causar confusión).
+          </li>
+          <li>
+            • No uses <code className="px-1 bg-white dark:bg-gray-700">siblingCount</code>{' '}
+            muy alto (hace la paginación muy larga).
+          </li>
+          <li>
+            • No olvides implementar <code className="px-1 bg-white dark:bg-gray-700">onPageChange</code>{' '}
+            (el componente no cambiará páginas solo).
+          </li>
+          <li>
+            • No uses paginación para muy pocas items (menos de 20). Considera mostrar
+            todo.
+          </li>
+        </ul>
+      </div>
+    </div>
+  ),
+};