siesa-ui-kit 1.0.0 → 1.0.1

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

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