siesa-ui-kit 1.0.1 → 1.0.2

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

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