siesa-ui-kit 1.0.3 → 1.0.4

package/src/views/LayoutCommercial/README.md

@@ -0,0 +1,286 @@
+# LayoutCommercial
+
+Vista completa de layout comercial del sistema Siesa con NavigationRail lateral, Navbar superior y formulario de configuración de ítems.
+
+## Captura del diseño
+
+![LayoutCommercial - Figma Design](https://www.figma.com/design/T675Nqfx0myJSt1GmRAYao/SB-Comercial?node-id=145-1383&m=dev)
+
+## Descripción
+
+`LayoutCommercial` es una vista completa que implementa el layout comercial estándar de Siesa. Compone múltiples componentes del sistema para crear una interfaz cohesiva de gestión comercial con formulario de configuración de ítems.
+
+### Composición
+
+La vista está compuesta por los siguientes componentes del sistema:
+
+| Componente | Ubicación | Descripción |
+|------------|-----------|-------------|
+| **Navbar** | Superior | Barra de navegación con logo Siesa, título "SB Comercial" y dropdown de usuario |
+| **NavigationRailCommercial** | Lateral izquierdo | Rail de navegación con iconos (Configuración, Carrito, Productos, Documentos) |
+| **Input** | Área de contenido | Campos de entrada para código, nombre y configuración |
+| **Select** | Área de contenido | Selectores para extensiones, modelo de costo y lotes |
+| **Radio** | Área de contenido | Selección entre "Inventario" y "Servicio" |
+| **Checkbox** | Área de contenido | Opciones múltiples para permisos y características |
+
+## Características
+
+- **Dark mode completo**: Soporte para tema claro y oscuro en todos los componentes
+- **Responsive design**: Adaptación automática a diferentes tamaños de pantalla
+- **TypeScript estricto**: Type safety completo con interfaces bien definadas
+- **Composición de componentes**: Reutiliza componentes del sistema (NO reimplementación)
+- **State management**: Control de estado del formulario mediante callback
+- **Tokens del sistema**: Colores, espaciado y tipografía consistentes
+
+## Uso básico
+
+```tsx
+import { LayoutCommercial } from './views/LayoutCommercial';
+import {
+  Cog6ToothIcon,
+  ShoppingCartIcon,
+  CubeIcon,
+  DocumentIcon,
+} from './components/NavigationRailCommercial/icons';
+
+const App = () => {
+  const [formData, setFormData] = useState({
+    codigoItem: '',
+    nombre: '',
+    tipoItem: 'inventario',
+    // ... más campos
+  });
+
+  const navigationItems = [
+    {
+      id: 'config',
+      label: 'Configuración',
+      icon: <Cog6ToothIcon />,
+      active: true,
+    },
+    {
+      id: 'cart',
+      label: 'Carrito',
+      icon: <ShoppingCartIcon />,
+    },
+    // ... más items
+  ];
+
+  return (
+    <LayoutCommercial
+      productName="SB Comercial"
+      userDropdown={{
+        avatar: '/avatar.jpg',
+        name: 'Carlos',
+        email: 'carlos@siesa.com',
+      }}
+      navigationItems={navigationItems}
+      formData={formData}
+      onFormChange={setFormData}
+    />
+  );
+};
+```
+
+## Props
+
+### LayoutCommercialProps
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `productName` | `string` | `'SB Comercial'` | Nombre del producto en el Navbar |
+| `userDropdown` | `UserDropdownProps` | `undefined` | Configuración del dropdown de usuario |
+| `navigationItems` | `NavigationRailCommercialMenuItem[]` | `undefined` | Items del NavigationRail |
+| `formData` | `FormData` | `undefined` | Datos del formulario |
+| `onFormChange` | `(data: FormData) => void` | `undefined` | Callback cuando cambian los datos |
+| `className` | `string` | `''` | Clases CSS adicionales |
+
+### FormData
+
+| Campo | Tipo | Descripción |
+|-------|------|-------------|
+| `codigoItem` | `string` | Código único del ítem |
+| `nombre` | `string` | Nombre del ítem |
+| `tipoItem` | `'inventario' \| 'servicio'` | Tipo de ítem |
+| `extension1` | `string` | Extensión 1 (ej: Color) |
+| `extension2` | `string` | Extensión 2 (ej: Talla) |
+| `modeloCosto` | `string` | Modelo de costo (FIFO, LIFO, Promedio) |
+| `configuracionSerial` | `string` | Configuración del serial |
+| `manejaLotes` | `string` | Si maneja lotes |
+| `manejaSeriales` | `boolean` | Si maneja seriales |
+| `procesoManufactura` | `boolean` | Si tiene procesos de manufactura/MRP |
+| `puedeComprarse` | `boolean` | Si puede comprarse |
+| `puedeVenderse` | `boolean` | Si puede venderse |
+| `permitir*` | `boolean` | Permisos de modificación para cada campo |
+
+## Ejemplos
+
+### Formulario vacío
+
+```tsx
+<LayoutCommercial
+  productName="SB Comercial"
+  userDropdown={{
+    avatar: '/avatar.jpg',
+    name: 'Carlos',
+    email: 'carlos@siesa.com',
+  }}
+  navigationItems={navigationItems}
+  formData={{
+    codigoItem: '',
+    nombre: '',
+    tipoItem: 'inventario',
+  }}
+  onFormChange={(data) => console.log(data)}
+/>
+```
+
+### Formulario con datos
+
+```tsx
+<LayoutCommercial
+  productName="SB Comercial"
+  userDropdown={{
+    avatar: '/avatar.jpg',
+    name: 'Carlos',
+    email: 'carlos@siesa.com',
+  }}
+  navigationItems={navigationItems}
+  formData={{
+    codigoItem: 'ITEM-001',
+    nombre: 'Producto de Ejemplo',
+    tipoItem: 'inventario',
+    extension1: 'azul',
+    extension2: 'm',
+    modeloCosto: 'fifo',
+    manejaLotes: 'si',
+    manejaSeriales: true,
+    puedeComprarse: true,
+    puedeVenderse: true,
+  }}
+  onFormChange={(data) => console.log(data)}
+/>
+```
+
+### Tipo servicio
+
+```tsx
+<LayoutCommercial
+  productName="SB Comercial"
+  userDropdown={{
+    avatar: '/avatar.jpg',
+    name: 'Carlos',
+    email: 'carlos@siesa.com',
+  }}
+  navigationItems={navigationItems}
+  formData={{
+    codigoItem: 'SERV-001',
+    nombre: 'Servicio de Consultoría',
+    tipoItem: 'servicio',
+    puedeVenderse: true,
+  }}
+  onFormChange={(data) => console.log(data)}
+/>
+```
+
+## Estructura del formulario
+
+### Sección: Información básica
+
+- **Código de ítem** (Input): Campo de texto para el código único
+- **Nombre** (Input): Campo de texto para el nombre del ítem
+- **Tipo** (Radio): Selección entre "Inventario" y "Servicio"
+- **Extensión 1** (Select): Selector para primera extensión (ej: Color)
+- **Extensión 2** (Select): Selector para segunda extensión (ej: Talla)
+- **Modelo de costo** (Select): Selector para modelo de costo (FIFO, LIFO, Promedio)
+- **Configuración del serial** (Input): Campo para configuración del serial
+- **Maneja lotes** (Select): Selector Sí/No para manejo de lotes
+- **Maneja seriales** (Checkbox): Checkbox para habilitar seriales
+- **Procesos de manufactura/MRP** (Checkbox): Checkbox para procesos
+- **Puede comprarse** (Checkbox): Checkbox para compras
+- **Puede venderse** (Checkbox): Checkbox para ventas
+
+### Sección: Permitir modificar ítem
+
+Grid de checkboxes que controlan qué campos pueden modificarse:
+
+- Extensión 1
+- Extensión 2
+- Modelo de costo
+- Maneja lotes
+- Maneja seriales
+- Configuración del serial
+- Proceso de manufactura
+- Compras
+- Ventas
+
+## Tokens de diseño
+
+### Colores
+
+| Elemento | Light Mode | Dark Mode |
+|----------|------------|-----------|
+| Background principal | `bg-background-secondary` | `dark:bg-dark-bg-primary` |
+| Cards/Formulario | `bg-white` | `dark:bg-dark-bg-primary` |
+| Texto principal | `text-content-primary` | `dark:text-dark-content-primary` |
+| Bordes | `border-border-primary` | `dark:border-dark-border-primary` |
+
+### Espaciado
+
+- **Padding contenedor**: `p-8` (32px)
+- **Gap entre secciones**: `space-y-6` (24px)
+- **Padding cards**: `p-6` (24px)
+- **Gap entre campos**: `gap-4` (16px)
+
+### Tipografía
+
+- **Título página**: `text-2xl font-bold` (24px)
+- **Título sección**: `text-lg font-semibold` (18px)
+- **Labels**: `text-sm` (14px) - definido en componentes Input/Select/Checkbox
+
+## Responsive Design
+
+La vista se adapta automáticamente:
+
+| Breakpoint | Comportamiento |
+|------------|----------------|
+| **Mobile** (`< 768px`) | Una columna para todos los campos |
+| **Tablet** (`≥ 768px`) | Grid de 2 columnas para campos relacionados |
+| **Desktop** (`≥ 1024px`) | Layout completo con NavigationRail, Navbar y contenido |
+
+## Componentes reutilizados
+
+Esta vista NO reimplementa componentes. Todos son importados del sistema:
+
+```tsx
+import { Navbar } from '../../components/Navbar';
+import { NavigationRailCommercial } from '../../components/NavigationRailCommercial';
+import { Input } from '../../components/Input';
+import { Select } from '../../components/Select';
+import { Radio } from '../../components/Radio/Radio';
+import { Checkbox } from '../../components/Checkbox/Checkbox';
+```
+
+## Mejores prácticas implementadas
+
+- ✅ **Composición sobre reimplementación**: Usa componentes existentes
+- ✅ **Dark mode completo**: Todos los elementos tienen variante dark
+- ✅ **Tokens del sistema**: Colores, espaciado y tipografía consistentes
+- ✅ **TypeScript estricto**: Type safety en props y estado
+- ✅ **Responsive design**: Mobile-first con breakpoints
+- ✅ **State management**: Control de estado mediante callback
+- ✅ **Documentación completa**: JSDoc en código y README
+- ✅ **Accesibilidad**: Labels y ARIA en componentes
+
+## Relacionado
+
+- [Navbar](../../components/Navbar/README.md)
+- [NavigationRailCommercial](../../components/NavigationRailCommercial/README.md)
+- [Input](../../components/Input/README.md)
+- [Select](../../components/Select/README.md)
+- [Checkbox](../../components/Checkbox/README.md)
+- [Radio](../../components/Radio/README.md)
+
+## Figma
+
+Diseño original: [LayoutCommercial en Figma](https://www.figma.com/design/T675Nqfx0myJSt1GmRAYao/SB-Comercial?node-id=145-1383&m=dev)

package/src/views/LayoutCommercial/index.ts

@@ -0,0 +1,2 @@
+export { LayoutCommercial } from './LayoutCommercial';
+export type { LayoutCommercialProps } from './LayoutCommercial.types';

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