valtech-components 2.0.687 → 2.0.689

package/src/lib/components/organisms/data-table/data-table.stories.ts

@@ -0,0 +1,787 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { DataTableComponent } from './data-table.component';
+import { DataTableMetadata, DataTableColumn } from './types';
+
+// Sample data types
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive' | 'pending';
+  createdAt: Date;
+  balance: number;
+}
+
+interface Participant {
+  id: number;
+  name: string;
+  email: string;
+  tickets: number;
+  amount: number;
+  paymentStatus: 'paid' | 'pending' | 'failed';
+  date: Date;
+}
+
+// Sample data
+const sampleUsers: User[] = [
+  { id: 1, name: 'María García', email: 'maria@email.com', role: 'Admin', status: 'active', createdAt: new Date('2024-01-15'), balance: 15000 },
+  { id: 2, name: 'Juan Pérez', email: 'juan@email.com', role: 'User', status: 'active', createdAt: new Date('2024-02-20'), balance: 8500 },
+  { id: 3, name: 'Ana Martínez', email: 'ana@email.com', role: 'Editor', status: 'inactive', createdAt: new Date('2024-03-10'), balance: 12300 },
+  { id: 4, name: 'Carlos López', email: 'carlos@email.com', role: 'User', status: 'pending', createdAt: new Date('2024-04-05'), balance: 0 },
+  { id: 5, name: 'Laura Rodríguez', email: 'laura@email.com', role: 'Admin', status: 'active', createdAt: new Date('2024-04-12'), balance: 25000 },
+  { id: 6, name: 'Pedro Hernández', email: 'pedro@email.com', role: 'User', status: 'active', createdAt: new Date('2024-05-01'), balance: 4200 },
+  { id: 7, name: 'Sofía Morales', email: 'sofia@email.com', role: 'Editor', status: 'inactive', createdAt: new Date('2024-05-15'), balance: 9800 },
+  { id: 8, name: 'Diego Torres', email: 'diego@email.com', role: 'User', status: 'active', createdAt: new Date('2024-06-01'), balance: 3100 },
+];
+
+const sampleParticipants: Participant[] = [
+  { id: 1, name: 'Roberto Sánchez', email: 'roberto@email.com', tickets: 5, amount: 250, paymentStatus: 'paid', date: new Date('2024-06-01') },
+  { id: 2, name: 'Elena Vargas', email: 'elena@email.com', tickets: 10, amount: 500, paymentStatus: 'paid', date: new Date('2024-06-02') },
+  { id: 3, name: 'Miguel Ángel', email: 'miguel@email.com', tickets: 3, amount: 150, paymentStatus: 'pending', date: new Date('2024-06-03') },
+  { id: 4, name: 'Carmen Ruiz', email: 'carmen@email.com', tickets: 8, amount: 400, paymentStatus: 'paid', date: new Date('2024-06-04') },
+  { id: 5, name: 'Fernando Castro', email: 'fernando@email.com', tickets: 2, amount: 100, paymentStatus: 'failed', date: new Date('2024-06-05') },
+];
+
+// Column definitions
+const userColumns: DataTableColumn<User>[] = [
+  { key: 'id', label: 'ID', width: '60px', sortable: true },
+  { key: 'name', label: 'Nombre', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'role', label: 'Rol', width: '100px' },
+  { key: 'status', label: 'Estado', width: '100px' },
+  { key: 'balance', label: 'Balance', width: '120px', align: 'right', format: (v) => `$${v.toLocaleString()}` },
+  { key: 'createdAt', label: 'Fecha', width: '120px', format: (v) => new Date(v).toLocaleDateString() },
+];
+
+const participantColumns: DataTableColumn<Participant>[] = [
+  { key: 'name', label: 'Participante', sortable: true },
+  { key: 'email', label: 'Email' },
+  { key: 'tickets', label: 'Boletos', width: '80px', align: 'center', sortable: true },
+  { key: 'amount', label: 'Monto', width: '100px', align: 'right', format: (v) => `$${v}` },
+  { key: 'paymentStatus', label: 'Pago', width: '100px' },
+  { key: 'date', label: 'Fecha', width: '120px', format: (v) => new Date(v).toLocaleDateString() },
+];
+
+const createDataTableProps = <T>(overrides: Partial<DataTableMetadata<T>> = {}): DataTableMetadata<T> => ({
+  columns: userColumns as DataTableColumn<T>[],
+  data: sampleUsers as T[],
+  size: 'medium',
+  bordered: true,
+  striped: false,
+  hoverable: true,
+  ...overrides,
+});
+
+const meta: Meta<DataTableComponent<any>> = {
+  title: 'Organisms/DataTable',
+  component: DataTableComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, DataTableComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  argTypes: {
+    props: {
+      description: 'Data table configuration object',
+      control: 'object',
+      table: {
+        type: {
+          summary: 'DataTableMetadata<T>',
+          detail: `{
+  columns: DataTableColumn<T>[];
+  data: T[];
+  sort?: DataTableSort;
+  clientSort?: boolean;
+  pagination?: DataTablePagination;
+  clientPagination?: boolean;
+  showPagination?: boolean;
+  selection?: DataTableSelection<T>;
+  showSelectionColumn?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  bordered?: boolean;
+  striped?: boolean;
+  hoverable?: boolean;
+  stickyHeader?: boolean;
+  maxHeight?: string;
+  showRowNumbers?: boolean;
+  emptyState?: DataTableEmptyState;
+  loadingState?: DataTableLoadingState;
+}`,
+        },
+      },
+    },
+    rowClick: {
+      action: 'rowClick',
+      description: 'Event emitted when a row is clicked',
+    },
+    selectionChange: {
+      action: 'selectionChange',
+      description: 'Event emitted when selection changes',
+    },
+    sortChange: {
+      action: 'sortChange',
+      description: 'Event emitted when sort changes',
+    },
+    pageChange: {
+      action: 'pageChange',
+      description: 'Event emitted when page changes',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## val-data-table
+
+A powerful data table component for displaying and interacting with tabular data.
+
+### Features
+
+- **Sorting**: Client-side or server-side sorting
+- **Pagination**: Client-side or server-side pagination
+- **Selection**: Single or multiple row selection
+- **Custom formatting**: Format cell values with custom functions
+- **Sticky header**: Fixed header while scrolling
+- **Loading states**: Skeleton loading display
+- **Empty states**: Custom empty data display
+
+### Usage
+
+\`\`\`html
+<val-data-table
+  [props]="{
+    columns: [
+      { key: 'name', label: 'Name', sortable: true },
+      { key: 'email', label: 'Email' },
+      { key: 'amount', label: 'Amount', format: (v) => '$' + v }
+    ],
+    data: users,
+    clientSort: true,
+    pagination: { page: 0, pageSize: 10, total: 100 },
+    showPagination: true
+  }"
+  (rowClick)="onRowClick($event)"
+  (sortChange)="onSortChange($event)"
+></val-data-table>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DataTableComponent<any>>;
+
+export const Default: Story = {
+  args: {
+    props: createDataTableProps(),
+  },
+};
+
+export const WithSorting: Story = {
+  args: {
+    props: createDataTableProps({
+      clientSort: true,
+      sort: { column: 'name', direction: 'asc' },
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Click column headers to sort. Client-side sorting enabled.',
+      },
+    },
+  },
+};
+
+export const WithPagination: Story = {
+  args: {
+    props: createDataTableProps({
+      clientPagination: true,
+      showPagination: true,
+      pagination: {
+        page: 0,
+        pageSize: 5,
+        total: sampleUsers.length,
+        pageSizeOptions: [5, 10, 25],
+      },
+    }),
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    props: createDataTableProps({
+      selection: {
+        mode: 'multiple',
+        selected: [],
+        trackBy: (row: User) => row.id,
+      },
+      showSelectionColumn: true,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Multiple row selection with checkboxes.',
+      },
+    },
+  },
+};
+
+export const SingleSelection: Story = {
+  args: {
+    props: createDataTableProps({
+      selection: {
+        mode: 'single',
+        selected: [],
+        trackBy: (row: User) => row.id,
+      },
+      showSelectionColumn: true,
+    }),
+  },
+};
+
+export const SizeSmall: Story = {
+  args: {
+    props: createDataTableProps({
+      size: 'small',
+    }),
+  },
+};
+
+export const SizeLarge: Story = {
+  args: {
+    props: createDataTableProps({
+      size: 'large',
+    }),
+  },
+};
+
+export const Striped: Story = {
+  args: {
+    props: createDataTableProps({
+      striped: true,
+    }),
+  },
+};
+
+export const NoBorder: Story = {
+  args: {
+    props: createDataTableProps({
+      bordered: false,
+    }),
+  },
+};
+
+export const WithRowNumbers: Story = {
+  args: {
+    props: createDataTableProps({
+      showRowNumbers: true,
+      rowNumberStart: 1,
+    }),
+  },
+};
+
+export const StickyHeader: Story = {
+  args: {
+    props: createDataTableProps({
+      stickyHeader: true,
+      maxHeight: '300px',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Fixed header while scrolling through content.',
+      },
+    },
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    props: createDataTableProps({
+      loadingState: {
+        loading: true,
+        skeletonRows: 5,
+        message: 'Cargando datos...',
+      },
+    }),
+  },
+};
+
+export const EmptyState: Story = {
+  args: {
+    props: createDataTableProps({
+      data: [],
+      emptyState: {
+        icon: 'search-outline',
+        title: 'No se encontraron resultados',
+        description: 'Intenta con diferentes filtros o términos de búsqueda.',
+      },
+    }),
+  },
+};
+
+export const CustomEmptyState: Story = {
+  args: {
+    props: createDataTableProps({
+      data: [],
+      emptyState: {
+        icon: 'people-outline',
+        title: 'Sin participantes',
+        description: 'Aún no hay participantes registrados en esta rifa.',
+      },
+    }),
+  },
+};
+
+export const ClickableRows: Story = {
+  args: {
+    props: createDataTableProps({
+      rowClickable: true,
+      hoverable: true,
+    }),
+  },
+};
+
+export const RaffleParticipants: Story = {
+  args: {
+    props: createDataTableProps<Participant>({
+      columns: participantColumns,
+      data: sampleParticipants,
+      clientSort: true,
+      striped: true,
+      showRowNumbers: true,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Example table for raffle participants.',
+      },
+    },
+  },
+};
+
+export const FullFeatured: Story = {
+  args: {
+    props: createDataTableProps({
+      clientSort: true,
+      clientPagination: true,
+      showPagination: true,
+      pagination: {
+        page: 0,
+        pageSize: 5,
+        total: sampleUsers.length,
+        pageSizeOptions: [5, 10, 25],
+      },
+      selection: {
+        mode: 'multiple',
+        selected: [],
+        trackBy: (row: User) => row.id,
+      },
+      showSelectionColumn: true,
+      showRowNumbers: true,
+      striped: true,
+      hoverable: true,
+      rowClickable: true,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Data table with all features enabled.',
+      },
+    },
+  },
+};
+
+export const ColoredHeader: Story = {
+  args: {
+    props: createDataTableProps({
+      headerColor: 'primary',
+    }),
+  },
+};
+
+export const CompactTable: Story = {
+  args: {
+    props: createDataTableProps({
+      size: 'small',
+      bordered: true,
+      columns: [
+        { key: 'name', label: 'Nombre' },
+        { key: 'role', label: 'Rol', width: '100px' },
+        { key: 'status', label: 'Estado', width: '80px' },
+      ],
+    }),
+  },
+};
+
+export const ResponsiveCards: Story = {
+  args: {
+    props: createDataTableProps({
+      responsiveMode: 'cards',
+      clientSort: true,
+      hoverable: true,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'En pantallas pequeñas (<768px), la tabla se convierte en cards apiladas.',
+      },
+    },
+  },
+};
+
+export const WithToolbar: Story = {
+  render: () => ({
+    template: `
+      <val-data-table [props]="tableProps">
+        <div toolbar style="display: flex; gap: 16px; align-items: center; width: 100%;">
+          <input
+            type="text"
+            placeholder="Buscar..."
+            style="flex: 1; padding: 8px 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px;"
+          />
+          <select style="padding: 8px 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px;">
+            <option>Todos los roles</option>
+            <option>Admin</option>
+            <option>User</option>
+            <option>Editor</option>
+          </select>
+        </div>
+      </val-data-table>
+    `,
+    props: {
+      tableProps: createDataTableProps({
+        clientSort: true,
+        hoverable: true,
+      }),
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Usa el slot `[toolbar]` para agregar búsqueda, filtros o tabs.',
+      },
+    },
+  },
+};
+
+export const WithStatusBadges: Story = {
+  render: () => ({
+    template: `
+      <val-data-table [props]="tableProps"></val-data-table>
+      <style>
+        .status-badge {
+          display: inline-flex;
+          align-items: center;
+          padding: 4px 10px;
+          border-radius: 9999px;
+          font-size: 12px;
+          font-weight: 500;
+        }
+        .status-badge--success {
+          background: rgba(16, 185, 129, 0.15);
+          color: #059669;
+        }
+        .status-badge--warning {
+          background: rgba(245, 158, 11, 0.15);
+          color: #d97706;
+        }
+        .status-badge--danger {
+          background: rgba(239, 68, 68, 0.15);
+          color: #dc2626;
+        }
+      </style>
+    `,
+    props: {
+      tableProps: {
+        columns: [
+          { key: 'name', label: 'Nombre', sortable: true },
+          { key: 'email', label: 'Email' },
+          { key: 'role', label: 'Rol', width: '100px' },
+          {
+            key: 'status',
+            label: 'Estado',
+            width: '120px',
+            format: (value: string) => {
+              const colorMap: Record<string, string> = {
+                active: 'success',
+                inactive: 'danger',
+                pending: 'warning',
+              };
+              return `<span class="status-badge status-badge--${colorMap[value] || 'medium'}">${value === 'active' ? 'Activo' : value === 'inactive' ? 'Inactivo' : 'Pendiente'}</span>`;
+            },
+          },
+        ],
+        data: sampleUsers,
+        clientSort: true,
+        hoverable: true,
+        bordered: true,
+      },
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Usa las clases `.status-badge--success`, `--warning`, `--danger` para mostrar estados.',
+      },
+    },
+  },
+};
+
+// ============================================
+// MODERN MATERIAL DESIGN STORIES
+// ============================================
+
+export const ModernDefault: Story = {
+  args: {
+    props: createDataTableProps({
+      elevation: 'medium',
+      hoverable: true,
+      clientSort: true,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Diseño moderno por defecto con elevación media y hover states mejorados.',
+      },
+    },
+  },
+};
+
+export const WithHeaderGradient: Story = {
+  args: {
+    props: createDataTableProps({
+      headerGradient: true,
+      elevation: 'high',
+      hoverable: true,
+      clientSort: true,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con gradiente azul/morado en el borde superior para un look más llamativo.',
+      },
+    },
+  },
+};
+
+export const CircularCheckboxes: Story = {
+  args: {
+    props: createDataTableProps({
+      checkboxStyle: 'circular',
+      selection: {
+        mode: 'multiple',
+        selected: [],
+        trackBy: (row: User) => row.id,
+      },
+      showSelectionColumn: true,
+      headerGradient: true,
+      elevation: 'medium',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Checkboxes circulares modernos para selección de filas.',
+      },
+    },
+  },
+};
+
+export const HighElevation: Story = {
+  args: {
+    props: createDataTableProps({
+      elevation: 'high',
+      hoverable: true,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Elevación alta con sombra más pronunciada para destacar la tabla.',
+      },
+    },
+  },
+};
+
+export const NoElevation: Story = {
+  args: {
+    props: createDataTableProps({
+      elevation: 'none',
+      bordered: true,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Sin sombra, solo con bordes. Útil para tablas embebidas.',
+      },
+    },
+  },
+};
+
+export const BorderLeftHighlight: Story = {
+  args: {
+    props: createDataTableProps({
+      rowHighlightStyle: 'border-left',
+      selection: {
+        mode: 'multiple',
+        selected: [],
+        trackBy: (row: User) => row.id,
+      },
+      showSelectionColumn: true,
+      headerGradient: true,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Filas seleccionadas destacadas con borde lateral colorido sin fondo.',
+      },
+    },
+  },
+};
+
+export const BothHighlight: Story = {
+  args: {
+    props: createDataTableProps({
+      rowHighlightStyle: 'both',
+      selection: {
+        mode: 'multiple',
+        selected: [],
+        trackBy: (row: User) => row.id,
+      },
+      showSelectionColumn: true,
+      checkboxStyle: 'circular',
+      headerGradient: true,
+      elevation: 'high',
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Filas seleccionadas con borde lateral más grueso y fondo coloreado.',
+      },
+    },
+  },
+};
+
+export const ModernFullFeatured: Story = {
+  args: {
+    props: createDataTableProps({
+      // Modern styling
+      elevation: 'high',
+      headerGradient: true,
+      checkboxStyle: 'circular',
+      rowHighlightStyle: 'both',
+      // Features
+      clientSort: true,
+      clientPagination: true,
+      showPagination: true,
+      pagination: {
+        page: 0,
+        pageSize: 5,
+        total: sampleUsers.length,
+        pageSizeOptions: [5, 10, 25],
+      },
+      selection: {
+        mode: 'multiple',
+        selected: [],
+        trackBy: (row: User) => row.id,
+      },
+      showSelectionColumn: true,
+      showRowNumbers: true,
+      hoverable: true,
+      rowClickable: true,
+    }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con todas las características modernas habilitadas: gradiente, checkboxes circulares, selección con borde, paginación y ordenamiento.',
+      },
+    },
+  },
+};
+
+export const BillingHistoryExample: Story = {
+  render: () => ({
+    template: `
+      <val-data-table [props]="tableProps">
+        <div toolbar style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <h3 style="margin: 0; font-size: 20px; font-weight: 600; color: #1e293b;">Billing History</h3>
+            <span style="background: #e0e7ff; color: #4338ca; padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 600;">
+              {{ tableProps.data.length }} Total
+            </span>
+          </div>
+          <div style="display: flex; gap: 8px;">
+            <button style="display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid #e2e8f0; border-radius: 8px; background: white; cursor: pointer; font-size: 14px; color: #475569;">
+              Export
+            </button>
+            <button style="display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: none; border-radius: 8px; background: #4f46e5; color: white; cursor: pointer; font-size: 14px;">
+              Download
+            </button>
+          </div>
+        </div>
+      </val-data-table>
+    `,
+    props: {
+      tableProps: {
+        columns: [
+          { key: 'invoice', label: 'Invoice', sortable: true },
+          { key: 'date', label: 'Billing Date', sortable: true, format: (v: Date) => v.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) },
+          { key: 'status', label: 'Status', width: '100px' },
+          { key: 'amount', label: 'Amount', width: '120px', sortable: true, format: (v: number) => `USD $${v.toFixed(2)}` },
+          { key: 'plan', label: 'Plan', width: '100px', sortable: true },
+        ],
+        data: [
+          { invoice: 'Invoice #011 - Jun 2026', date: new Date('2026-06-25'), status: 'Paid', amount: 25.00, plan: 'Basic' },
+          { invoice: 'Invoice #010 - May 2026', date: new Date('2026-06-25'), status: 'Paid', amount: 35.00, plan: 'Pro' },
+          { invoice: 'Invoice #009 - Apr 2026', date: new Date('2026-06-25'), status: 'Failed', amount: 40.00, plan: 'Premium' },
+          { invoice: 'Invoice #008 - Mar 2026', date: new Date('2026-06-25'), status: 'Paid', amount: 15.00, plan: 'Elite' },
+          { invoice: 'Invoice #007 - Feb 2026', date: new Date('2026-06-25'), status: 'Paid', amount: 25.00, plan: 'Pro' },
+        ],
+        elevation: 'high',
+        headerGradient: true,
+        checkboxStyle: 'circular',
+        rowHighlightStyle: 'both',
+        selection: {
+          mode: 'multiple',
+          selected: [],
+        },
+        showSelectionColumn: true,
+        hoverable: true,
+        clientSort: true,
+        showPagination: true,
+        clientPagination: true,
+        pagination: {
+          page: 0,
+          pageSize: 10,
+          total: 5,
+        },
+      },
+    },
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo de tabla de historial de facturación con el nuevo diseño Material moderno.',
+      },
+    },
+  },
+};