siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,805 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Table } from './Table';
+import type { TableColumn } from './Table.types';
+
+// Datos de ejemplo
+interface Usuario {
+  id: number;
+  nombre: string;
+  email: string;
+  usuario: string;
+  rol: string;
+  estado: 'activo' | 'inactivo';
+  avatar?: string;
+}
+
+const usuariosEjemplo: Usuario[] = [
+  {
+    id: 1,
+    nombre: 'Jhonnatan Diaz',
+    email: 'jhonnatan.diaz@siesa.com',
+    usuario: 'jhonnatan.diaz',
+    rol: 'Administrador',
+    estado: 'activo',
+    avatar: 'https://i.pravatar.cc/150?img=1',
+  },
+  {
+    id: 2,
+    nombre: 'Santiago Sanchez',
+    email: 'santiago.sanchez@siesa.com',
+    usuario: 'santiago.sanchez',
+    rol: 'Desarrollador',
+    estado: 'activo',
+    avatar: 'https://i.pravatar.cc/150?img=2',
+  },
+  {
+    id: 3,
+    nombre: 'Daniel Mesa',
+    email: 'daniel.mesa@siesa.com',
+    usuario: 'daniel.mesa',
+    rol: 'Diseñador',
+    estado: 'activo',
+    avatar: 'https://i.pravatar.cc/150?img=3',
+  },
+  {
+    id: 4,
+    nombre: 'Juan David Guevara',
+    email: 'juan.guevara@siesa.com',
+    usuario: 'juan.guevara',
+    rol: 'QA',
+    estado: 'inactivo',
+    avatar: 'https://i.pravatar.cc/150?img=4',
+  },
+  {
+    id: 5,
+    nombre: 'Guillermo Duran',
+    email: 'guillermo.duran@siesa.com',
+    usuario: 'guillermo.duran',
+    rol: 'Product Manager',
+    estado: 'activo',
+    avatar: 'https://i.pravatar.cc/150?img=5',
+  },
+];
+
+const meta = {
+  title: 'Siesa UI Kit/Table',
+  component: Table,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Componente de tabla flexible con soporte para sorting, variantes visuales y dark mode completo.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Título opcional de la tabla',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    variant: {
+      control: 'select',
+      options: ['basic', 'fullWidth', 'striped', 'grid'],
+      description: 'Variante visual de la tabla',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'basic' },
+        category: 'Apariencia',
+      },
+    },
+    showBorder: {
+      control: 'boolean',
+      description: 'Si se muestra el borde del container',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Apariencia',
+      },
+    },
+    showShadow: {
+      control: 'boolean',
+      description: 'Si se muestra la sombra del container',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Apariencia',
+      },
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Si la tabla debe ocupar todo el ancho disponible',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Apariencia',
+      },
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Si se está cargando la información',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    emptyMessage: {
+      control: 'text',
+      description: 'Texto a mostrar cuando no hay datos',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'No hay datos disponibles' },
+        category: 'Contenido',
+      },
+    },
+  },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    title: 'Usuarios',
+    columns: [
+      { header: 'Nombre', accessor: 'nombre', sortable: true },
+      { header: 'Email', accessor: 'email' },
+      { header: 'Usuario', accessor: 'usuario' },
+    ],
+    data: usuariosEjemplo,
+    variant: 'basic',
+    showBorder: true,
+    showShadow: true,
+    fullWidth: false,
+  },
+};
+
+// ============================================
+// 2. VARIANTE BÁSICA
+// ============================================
+export const Basica: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table title="Usuarios" columns={columns} data={usuariosEjemplo} variant="basic" />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 3. VARIANTE FULL WIDTH
+// ============================================
+export const AnchoCompleto: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="w-full">
+        <Table
+          title="Usuarios - Ancho Completo"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="fullWidth"
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 4. VARIANTE STRIPED (FILAS ALTERNAS)
+// ============================================
+export const FilasAlternas: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table
+          title="Usuarios - Filas Alternas"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="striped"
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 5. VARIANTE CON GRID (BORDES)
+// ============================================
+export const ConBordes: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table title="Usuarios - Con Bordes" columns={columns} data={usuariosEjemplo} variant="grid" />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 6. CON SORTING
+// ============================================
+export const ConOrdenamiento: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+        sortable: true,
+      },
+      {
+        header: 'Rol',
+        accessor: 'rol',
+        sortable: true,
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <div className="mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <p className="text-sm text-gray-600 dark:text-gray-300">
+            <strong>💡 Consejo:</strong> Haz clic en los headers con el icono de ordenamiento para
+            ordenar las columnas.
+          </p>
+        </div>
+        <Table
+          title="Usuarios - Con Ordenamiento"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="basic"
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 7. CON RENDER CUSTOM
+// ============================================
+export const ConRenderPersonalizado: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Estado',
+        accessor: 'estado',
+        render: (value) => (
+          <span
+            className={`
+              inline-flex
+              items-center
+              px-2
+              py-1
+              rounded-md
+              text-xs
+              font-bold
+              ${
+                value === 'activo'
+                  ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+                  : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+              }
+            `}
+          >
+            {value === 'activo' ? 'Activo' : 'Inactivo'}
+          </span>
+        ),
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table
+          title="Usuarios - Con Badge de Estado"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="basic"
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 8. ESTADO DE CARGA
+// ============================================
+export const EstadoDeCarga: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table
+          title="Usuarios - Cargando..."
+          columns={columns}
+          data={[]}
+          variant="basic"
+          loading={true}
+          loadingRows={5}
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 9. SIN DATOS
+// ============================================
+export const SinDatos: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table
+          title="Usuarios - Sin Datos"
+          columns={columns}
+          data={[]}
+          variant="basic"
+          emptyMessage="No hay usuarios registrados"
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 10. CON TODAS LAS COLUMNAS
+// ============================================
+export const TablaCompleta: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'ID',
+        accessor: 'id',
+        width: '80px',
+        align: 'center',
+      },
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+        sortable: true,
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+      {
+        header: 'Rol',
+        accessor: 'rol',
+        sortable: true,
+      },
+      {
+        header: 'Estado',
+        accessor: 'estado',
+        align: 'center',
+        render: (value) => (
+          <span
+            className={`
+              inline-flex
+              items-center
+              px-2
+              py-1
+              rounded-md
+              text-xs
+              font-bold
+              ${
+                value === 'activo'
+                  ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+                  : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+              }
+            `}
+          >
+            {value === 'activo' ? '✓ Activo' : '✗ Inactivo'}
+          </span>
+        ),
+      },
+    ];
+
+    return (
+      <div className="w-full">
+        <Table
+          title="Gestión de Usuarios"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="fullWidth"
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 11. CON AVATARES
+// ============================================
+export const ConAvatares: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        render: (_value, row) => (
+          <div className="flex items-center gap-2">
+            {/* Avatar */}
+            <img
+              src={row.avatar || 'https://i.pravatar.cc/150?img=0'}
+              alt={row.nombre}
+              className="w-8 h-8 rounded-full object-cover"
+            />
+            {/* Texto */}
+            <div className="flex flex-col">
+              <span className="text-sm font-normal text-content-primary dark:text-dark-content-primary">
+                {row.nombre}
+              </span>
+              <span className="text-xs font-normal text-content-secondary dark:text-content-secondary">
+                {row.email}
+              </span>
+            </div>
+          </div>
+        ),
+      },
+      {
+        header: 'Rol',
+        accessor: 'rol',
+      },
+      {
+        header: 'Estado',
+        accessor: 'estado',
+        align: 'center',
+        width: '96px',
+        render: (value) => (
+          <span
+            className={`
+              inline-flex
+              items-center
+              px-1.5
+              py-1
+              rounded-md
+              text-xs
+              font-normal
+              ${
+                value === 'activo'
+                  ? 'bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-400'
+                  : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800/30 dark:text-zinc-400'
+              }
+            `}
+          >
+            {value === 'activo' ? 'Online' : 'Offline'}
+          </span>
+        ),
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table title="Usuarios" columns={columns} data={usuariosEjemplo} variant="basic" />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 12. CON PAGINACIÓN
+// ============================================
+export const ConPaginacion: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(3);
+    const totalPages = 66;
+
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table
+          title="Usuarios"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="striped"
+          pagination={{
+            currentPage,
+            totalPages,
+            onPageChange: setCurrentPage,
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 13. CON AVATARES Y PAGINACIÓN (COMPLETO)
+// ============================================
+export const ConAvatarYPaginacion: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(3);
+    const totalPages = 66;
+
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        render: (_value, row) => (
+          <div className="flex items-center gap-2">
+            {/* Avatar */}
+            <img
+              src={row.avatar || 'https://i.pravatar.cc/150?img=0'}
+              alt={row.nombre}
+              className="w-8 h-8 rounded-full object-cover"
+            />
+            {/* Texto */}
+            <div className="flex flex-col">
+              <span className="text-sm font-normal text-content-primary dark:text-dark-content-primary">
+                {row.nombre}
+              </span>
+              <span className="text-xs font-normal text-content-secondary dark:text-content-secondary">
+                {row.email}
+              </span>
+            </div>
+          </div>
+        ),
+      },
+      {
+        header: 'Rol',
+        accessor: 'rol',
+      },
+      {
+        header: 'Estado',
+        accessor: 'estado',
+        align: 'center',
+        width: '96px',
+        render: (value) => (
+          <span
+            className={`
+              inline-flex
+              items-center
+              px-1.5
+              py-1
+              rounded-md
+              text-xs
+              font-normal
+              ${
+                value === 'activo'
+                  ? 'bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-400'
+                  : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800/30 dark:text-zinc-400'
+              }
+            `}
+          >
+            {value === 'activo' ? 'Online' : 'Offline'}
+          </span>
+        ),
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table
+          title="Usuarios"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="basic"
+          pagination={{
+            currentPage,
+            totalPages,
+            onPageChange: setCurrentPage,
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 14. TODAS LAS VARIANTES
+// ============================================
+export const TodasLasVariantes: Story = {
+  args: {
+    columns: [
+      { header: 'Nombre', accessor: 'nombre' },
+      { header: 'Email', accessor: 'email' },
+      { header: 'Usuario', accessor: 'usuario' },
+    ],
+    data: usuariosEjemplo.slice(0, 3),
+  },
+  render: (args) => (
+    <div className="space-y-8 p-6">
+      {/* Básica */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Básica</h3>
+        <div className="max-w-4xl">
+          <Table {...args} title="Usuarios" variant="basic" />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Variante básica con padding y spacing estándar
+        </p>
+      </div>
+
+      {/* Ancho Completo */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Ancho Completo</h3>
+        <Table {...args} title="Usuarios - Full Width" variant="fullWidth" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Tabla que ocupa todo el ancho disponible
+        </p>
+      </div>
+
+      {/* Filas Alternas */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Filas Alternas</h3>
+        <div className="max-w-4xl">
+          <Table {...args} title="Usuarios - Striped" variant="striped" />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Filas con fondo alternado para mejor legibilidad
+        </p>
+      </div>
+
+      {/* Con Bordes */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Bordes</h3>
+        <div className="max-w-4xl">
+          <Table {...args} title="Usuarios - Grid" variant="grid" />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Tabla con bordes alrededor de las celdas
+        </p>
+      </div>
+
+      {/* Consejos */}
+      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+        <p className="text-xs text-gray-600 dark:text-gray-300">
+          <strong>💡 Consejos:</strong>
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">basic</code> para tablas con
+          contenido estándar
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">fullWidth</code> para
+          dashboards y layouts completos
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">striped</code> para tablas
+          con muchas filas
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">grid</code> para separar
+          visualmente las celdas
+        </p>
+      </div>
+    </div>
+  ),
+};