siesa-ui-kit 1.0.2 → 1.0.3

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

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