siesa-ui-kit 1.0.2 → 1.0.4

package/src/views/ListView/ListView.stories.tsx

@@ -1,329 +1,329 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ListView } from './ListView';
-import { Badge } from '../../components/Badge/Badge';
-import { Avatar } from '../../components/Avatar/Avatar';
-import type { ListViewQuickFilter } from './ListView.types';
-import {
-  EllipsisHorizontalIcon,
-  DocumentCheckIcon,
-  DocumentMinusIcon,
-  DocumentArrowUpIcon,
-} from './icons';
-
-// ===== TIPOS PARA LA DATA DE EJEMPLO =====
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  status: 'active' | 'inactive';
-  avatar?: string;
-}
-
-// ===== DATA DE EJEMPLO =====
-const sampleUsers: User[] = [
-  { id: '1', name: 'Jhonnatan Diaz', email: 'jhonnatan.diaz@siesa.com', role: 'Administrador', status: 'active' },
-  { id: '2', name: 'Santiago Sanchez', email: 'santiago.sanchez@siesa.com', role: 'Editor', status: 'active' },
-  { id: '3', name: 'Daniel Mesa', email: 'daniel.mesa@siesa.com', role: 'Editor', status: 'active' },
-  { id: '4', name: 'Juan David Guevara', email: 'juan.guevara@siesa.com', role: 'Editor', status: 'active' },
-  { id: '5', name: 'Francisco Gonzalez', email: 'francisco.gonzalez@siesa.com', role: 'Editor', status: 'active' },
-  { id: '6', name: 'Francisco Gonzalez', email: 'francisco.gonzalez@siesa.com', role: 'Editor', status: 'inactive' },
-  { id: '7', name: 'Brayan Perdomo', email: 'brayan.perdomo@siesa.com', role: 'Editor', status: 'active' },
-  { id: '8', name: 'Brayan Quiñones', email: 'brayan.quinones@siesa.com', role: 'Editor', status: 'active' },
-];
-
-// ===== COLUMNAS DE EJEMPLO =====
-const columns = [
-  {
-    header: 'Nombre',
-    accessor: 'name' as const,
-    sortable: true,
-    render: (value: string, row: User) => (
-      <div className="flex items-center gap-2">
-        <Avatar
-          src={row.avatar || `https://i.pravatar.cc/150?u=${row.id}`}
-          alt={value}
-          size="8"
-          type="circular"
-        />
-        <div className="flex flex-col gap-1">
-          <span className="text-sm font-normal text-content-primary dark:text-dark-content-primary">
-            {value}
-          </span>
-          <a
-            href={`mailto:${row.email}`}
-            className="text-[10px] leading-3 text-content-secondary dark:text-content-secondary hover:underline"
-          >
-            {row.email}
-          </a>
-        </div>
-      </div>
-    ),
-  },
-  {
-    header: 'Rol',
-    accessor: 'role' as const,
-    sortable: true,
-    render: (value: string) => (
-      <span className="text-sm text-content-primary dark:text-dark-content-primary">
-        {value}
-      </span>
-    ),
-  },
-  {
-    header: 'Estado',
-    accessor: 'status' as const,
-    sortable: false,
-    width: '96px',
-    render: (value: 'active' | 'inactive') => (
-      <Badge
-        color={value === 'active' ? 'lime' : 'zinc'}
-        label={value === 'active' ? 'Activo' : 'Inactivo'}
-      />
-    ),
-  },
-  {
-    header: '',
-    accessor: 'id' as const,
-    sortable: false,
-    width: '84px',
-    render: () => (
-      <button className="flex items-center justify-center p-2.5 rounded-lg shadow-sm hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary transition-colors">
-        <EllipsisHorizontalIcon className="w-4 h-4 text-content-secondary dark:text-content-secondary" />
-      </button>
-    ),
-  },
-];
-
-// ===== FILTROS RÁPIDOS DE EJEMPLO =====
-const quickFilters: ListViewQuickFilter[] = [
-  {
-    id: 'paid',
-    label: 'Facturas Pagadas',
-    color: 'lime',
-    icon: <DocumentCheckIcon className="w-3 h-3" />,
-  },
-  {
-    id: 'pending',
-    label: 'facturas Pendientes por Pago',
-    color: 'rose',
-    icon: <DocumentMinusIcon className="w-3 h-3" />,
-  },
-  {
-    id: 'orders',
-    label: 'Ordenes de Compra',
-    color: 'sky',
-    icon: <DocumentArrowUpIcon className="w-3 h-3" />,
-  },
-];
-
-// ===== USER INFO =====
-const sampleUserInfo = {
-  avatar: 'https://i.pravatar.cc/150?img=12',
-  name: 'Jhonnatan Diaz',
-  role: 'Administrador',
-};
-
-// ===== META =====
-const meta: Meta<typeof ListView> = {
-  title: 'Siesa UI Kit/Views/ListView',
-  component: ListView,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: `
-Vista de lista completa del sistema de diseño Siesa.
-
-Incluye:
-- Navigation Rail lateral con FAB
-- Navbar superior con logo, título y dropdown de usuario
-- Barra de filtros rápidos con badges de colores
-- Tabla de datos con cabecera, cuerpo y paginación
-- Botones de acción (Crear, Auditoría, Filtrar)
-- Buscador integrado
-- Dropdown de opciones de vista
-        `,
-      },
-    },
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof ListView>;
-
-// ============================================
-// 1. DEFAULT - Vista completa por defecto
-// ============================================
-export const Default: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <ListView
-        title="List View"
-        navbarTitle="List View"
-        tableTitle="Usuarios"
-        columns={columns}
-        data={sampleUsers}
-        quickFilters={quickFilters}
-        selectedNavId="home"
-        userDropdown={sampleUserInfo}
-        notifications={{
-          bell: true,
-          cart: 5,
-        }}
-        pagination={{
-          currentPage: 3,
-          totalPages: 66,
-          onPageChange: (page) => console.log('Page:', page),
-          previousLabel: 'Atrás',
-          nextLabel: 'Siguiente',
-        }}
-        onSearch={(query) => console.log('Search:', query)}
-        onFabClick={() => console.log('FAB clicked')}
-        onNavSelect={(id) => console.log('Nav selected:', id)}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 2. LOADING - Estado de carga
-// ============================================
-export const Loading: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <ListView
-        title="List View"
-        navbarTitle="List View"
-        tableTitle="Usuarios"
-        columns={columns}
-        data={[]}
-        loading={true}
-        loadingRows={8}
-        quickFilters={quickFilters}
-        selectedNavId="home"
-        userDropdown={sampleUserInfo}
-        pagination={{
-          currentPage: 1,
-          totalPages: 10,
-          onPageChange: () => {},
-        }}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 3. EMPTY - Sin datos
-// ============================================
-export const Empty: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <ListView
-        title="List View"
-        navbarTitle="List View"
-        tableTitle="Usuarios"
-        columns={columns}
-        data={[]}
-        emptyMessage="No se encontraron usuarios"
-        quickFilters={quickFilters}
-        selectedNavId="home"
-        userDropdown={sampleUserInfo}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 4. CON OPCIONES DE VISTA
-// ============================================
-export const WithViewOptions: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <ListView
-        title="List View"
-        navbarTitle="List View"
-        tableTitle="Usuarios"
-        columns={columns}
-        data={sampleUsers}
-        quickFilters={quickFilters}
-        selectedNavId="home"
-        userDropdown={sampleUserInfo}
-        pagination={{
-          currentPage: 1,
-          totalPages: 66,
-          onPageChange: () => {},
-        }}
-        viewOptions={[
-          { id: 'all', label: 'Todos' },
-          { id: 'active', label: 'Activos' },
-          { id: 'inactive', label: 'Inactivos' },
-        ]}
-        selectedViewOption="all"
-        onViewOptionChange={(id) => console.log('View option:', id)}
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 5. MINIMAL - Sin elementos opcionales
-// ============================================
-export const Minimal: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <ListView
-        title="Lista Simple"
-        navbarTitle="Lista Simple"
-        tableTitle="Datos"
-        columns={[
-          { header: 'Nombre', accessor: 'name' as const },
-          { header: 'Email', accessor: 'email' as const },
-        ]}
-        data={sampleUsers.slice(0, 3)}
-        showFab={false}
-        selectedNavId="home"
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 6. CON BOTONES DE ACCIÓN PERSONALIZADOS
-// ============================================
-export const WithCustomActions: Story = {
-  render: () => (
-    <div className="min-h-screen w-full">
-      <ListView
-        title="List View"
-        navbarTitle="List View"
-        tableTitle="Usuarios"
-        columns={columns}
-        data={sampleUsers}
-        quickFilters={quickFilters}
-        selectedNavId="home"
-        userDropdown={sampleUserInfo}
-        pagination={{
-          currentPage: 1,
-          totalPages: 10,
-          onPageChange: () => {},
-        }}
-        actionButtons={[
-          {
-            id: 'create',
-            label: 'Crear Usuario',
-            variant: 'primary',
-            onClick: () => alert('Crear usuario'),
-          },
-          {
-            id: 'export',
-            label: 'Exportar',
-            variant: 'secondary',
-            onClick: () => alert('Exportar'),
-          },
-        ]}
-      />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { ListView } from './ListView';
+import { Badge } from '../../components/Badge/Badge';
+import { Avatar } from '../../components/Avatar/Avatar';
+import type { ListViewQuickFilter } from './ListView.types';
+import {
+  EllipsisHorizontalIcon,
+  DocumentCheckIcon,
+  DocumentMinusIcon,
+  DocumentArrowUpIcon,
+} from './icons';
+
+// ===== TIPOS PARA LA DATA DE EJEMPLO =====
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+  avatar?: string;
+}
+
+// ===== DATA DE EJEMPLO =====
+const sampleUsers: User[] = [
+  { id: '1', name: 'Jhonnatan Diaz', email: 'jhonnatan.diaz@siesa.com', role: 'Administrador', status: 'active' },
+  { id: '2', name: 'Santiago Sanchez', email: 'santiago.sanchez@siesa.com', role: 'Editor', status: 'active' },
+  { id: '3', name: 'Daniel Mesa', email: 'daniel.mesa@siesa.com', role: 'Editor', status: 'active' },
+  { id: '4', name: 'Juan David Guevara', email: 'juan.guevara@siesa.com', role: 'Editor', status: 'active' },
+  { id: '5', name: 'Francisco Gonzalez', email: 'francisco.gonzalez@siesa.com', role: 'Editor', status: 'active' },
+  { id: '6', name: 'Francisco Gonzalez', email: 'francisco.gonzalez@siesa.com', role: 'Editor', status: 'inactive' },
+  { id: '7', name: 'Brayan Perdomo', email: 'brayan.perdomo@siesa.com', role: 'Editor', status: 'active' },
+  { id: '8', name: 'Brayan Quiñones', email: 'brayan.quinones@siesa.com', role: 'Editor', status: 'active' },
+];
+
+// ===== COLUMNAS DE EJEMPLO =====
+const columns = [
+  {
+    header: 'Nombre',
+    accessor: 'name' as const,
+    sortable: true,
+    render: (value: string, row: User) => (
+      <div className="flex items-center gap-2">
+        <Avatar
+          src={row.avatar || `https://i.pravatar.cc/150?u=${row.id}`}
+          alt={value}
+          size="8"
+          type="circular"
+        />
+        <div className="flex flex-col gap-1">
+          <span className="text-sm font-normal text-content-primary dark:text-dark-content-primary">
+            {value}
+          </span>
+          <a
+            href={`mailto:${row.email}`}
+            className="text-[10px] leading-3 text-content-secondary dark:text-content-secondary hover:underline"
+          >
+            {row.email}
+          </a>
+        </div>
+      </div>
+    ),
+  },
+  {
+    header: 'Rol',
+    accessor: 'role' as const,
+    sortable: true,
+    render: (value: string) => (
+      <span className="text-sm text-content-primary dark:text-dark-content-primary">
+        {value}
+      </span>
+    ),
+  },
+  {
+    header: 'Estado',
+    accessor: 'status' as const,
+    sortable: false,
+    width: '96px',
+    render: (value: 'active' | 'inactive') => (
+      <Badge
+        color={value === 'active' ? 'lime' : 'zinc'}
+        label={value === 'active' ? 'Activo' : 'Inactivo'}
+      />
+    ),
+  },
+  {
+    header: '',
+    accessor: 'id' as const,
+    sortable: false,
+    width: '84px',
+    render: () => (
+      <button className="flex items-center justify-center p-2.5 rounded-lg shadow-sm hover:bg-bg-secondary dark:hover:bg-dark-bg-secondary transition-colors">
+        <EllipsisHorizontalIcon className="w-4 h-4 text-content-secondary dark:text-content-secondary" />
+      </button>
+    ),
+  },
+];
+
+// ===== FILTROS RÁPIDOS DE EJEMPLO =====
+const quickFilters: ListViewQuickFilter[] = [
+  {
+    id: 'paid',
+    label: 'Facturas Pagadas',
+    color: 'lime',
+    icon: <DocumentCheckIcon className="w-3 h-3" />,
+  },
+  {
+    id: 'pending',
+    label: 'facturas Pendientes por Pago',
+    color: 'rose',
+    icon: <DocumentMinusIcon className="w-3 h-3" />,
+  },
+  {
+    id: 'orders',
+    label: 'Ordenes de Compra',
+    color: 'sky',
+    icon: <DocumentArrowUpIcon className="w-3 h-3" />,
+  },
+];
+
+// ===== USER INFO =====
+const sampleUserInfo = {
+  avatar: 'https://i.pravatar.cc/150?img=12',
+  name: 'Jhonnatan Diaz',
+  role: 'Administrador',
+};
+
+// ===== META =====
+const meta: Meta<typeof ListView> = {
+  title: 'Siesa UI Kit/Views/ListView',
+  component: ListView,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+Vista de lista completa del sistema de diseño Siesa.
+
+Incluye:
+- Navigation Rail lateral con FAB
+- Navbar superior con logo, título y dropdown de usuario
+- Barra de filtros rápidos con badges de colores
+- Tabla de datos con cabecera, cuerpo y paginación
+- Botones de acción (Crear, Auditoría, Filtrar)
+- Buscador integrado
+- Dropdown de opciones de vista
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ListView>;
+
+// ============================================
+// 1. DEFAULT - Vista completa por defecto
+// ============================================
+export const Default: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <ListView
+        title="List View"
+        navbarTitle="List View"
+        tableTitle="Usuarios"
+        columns={columns}
+        data={sampleUsers}
+        quickFilters={quickFilters}
+        selectedNavId="home"
+        userDropdown={sampleUserInfo}
+        notifications={{
+          bell: true,
+          cart: 5,
+        }}
+        pagination={{
+          currentPage: 3,
+          totalPages: 66,
+          onPageChange: (page) => console.log('Page:', page),
+          previousLabel: 'Atrás',
+          nextLabel: 'Siguiente',
+        }}
+        onSearch={(query) => console.log('Search:', query)}
+        onFabClick={() => console.log('FAB clicked')}
+        onNavSelect={(id) => console.log('Nav selected:', id)}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 2. LOADING - Estado de carga
+// ============================================
+export const Loading: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <ListView
+        title="List View"
+        navbarTitle="List View"
+        tableTitle="Usuarios"
+        columns={columns}
+        data={[]}
+        loading={true}
+        loadingRows={8}
+        quickFilters={quickFilters}
+        selectedNavId="home"
+        userDropdown={sampleUserInfo}
+        pagination={{
+          currentPage: 1,
+          totalPages: 10,
+          onPageChange: () => {},
+        }}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 3. EMPTY - Sin datos
+// ============================================
+export const Empty: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <ListView
+        title="List View"
+        navbarTitle="List View"
+        tableTitle="Usuarios"
+        columns={columns}
+        data={[]}
+        emptyMessage="No se encontraron usuarios"
+        quickFilters={quickFilters}
+        selectedNavId="home"
+        userDropdown={sampleUserInfo}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 4. CON OPCIONES DE VISTA
+// ============================================
+export const WithViewOptions: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <ListView
+        title="List View"
+        navbarTitle="List View"
+        tableTitle="Usuarios"
+        columns={columns}
+        data={sampleUsers}
+        quickFilters={quickFilters}
+        selectedNavId="home"
+        userDropdown={sampleUserInfo}
+        pagination={{
+          currentPage: 1,
+          totalPages: 66,
+          onPageChange: () => {},
+        }}
+        viewOptions={[
+          { id: 'all', label: 'Todos' },
+          { id: 'active', label: 'Activos' },
+          { id: 'inactive', label: 'Inactivos' },
+        ]}
+        selectedViewOption="all"
+        onViewOptionChange={(id) => console.log('View option:', id)}
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 5. MINIMAL - Sin elementos opcionales
+// ============================================
+export const Minimal: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <ListView
+        title="Lista Simple"
+        navbarTitle="Lista Simple"
+        tableTitle="Datos"
+        columns={[
+          { header: 'Nombre', accessor: 'name' as const },
+          { header: 'Email', accessor: 'email' as const },
+        ]}
+        data={sampleUsers.slice(0, 3)}
+        showFab={false}
+        selectedNavId="home"
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 6. CON BOTONES DE ACCIÓN PERSONALIZADOS
+// ============================================
+export const WithCustomActions: Story = {
+  render: () => (
+    <div className="min-h-screen w-full">
+      <ListView
+        title="List View"
+        navbarTitle="List View"
+        tableTitle="Usuarios"
+        columns={columns}
+        data={sampleUsers}
+        quickFilters={quickFilters}
+        selectedNavId="home"
+        userDropdown={sampleUserInfo}
+        pagination={{
+          currentPage: 1,
+          totalPages: 10,
+          onPageChange: () => {},
+        }}
+        actionButtons={[
+          {
+            id: 'create',
+            label: 'Crear Usuario',
+            variant: 'primary',
+            onClick: () => alert('Crear usuario'),
+          },
+          {
+            id: 'export',
+            label: 'Exportar',
+            variant: 'secondary',
+            onClick: () => alert('Exportar'),
+          },
+        ]}
+      />
+    </div>
+  ),
+};