siesa-ui-kit 1.0.2 → 1.0.3

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

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