siesa-ui-kit 1.0.4 → 1.0.6

package/src/views/LayoutCommercial/README.md

@@ -1,286 +0,0 @@
-# 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

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

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