thegroup

Librería de componentes compartida entre los frontends admin, facturador y autogestion. Se publica como paquete npm thegroup y se bundlea con tsup (ESM + CJS + tipos .d.ts).

Instalación

npm install thegroup

Dependencias peer requeridas

npm install react react-dom antd @ant-design/icons react-router-dom query-string react-highlight-words

Uso básico

Cada app consumidora debe envolver su árbol con EnvProvider:

import { EnvProvider } from 'thegroup'

<EnvProvider
  sistema="administracion"
  token={jwt}
  urlApi="https://api.ejemplo.com"
  config={{ URL_API_PRIVATE: '...', URL_API_PUBLIC: '...' }}
>
  <App />
</EnvProvider>

Estructura

src/
├── index.ts                    ← barrel de exportaciones
├── providers/
│   └── Environment.tsx         ← EnvProvider + useEnvironment
├── hooks/
│   ├── useQuery.ts             ← GET con autoFetch y refetch
│   └── useMutate.ts            ← POST / PUT / DELETE
├── constants/
│   └── index.ts                ← IDs de artículos, subrubros, listas de precios
├── types/
│   ├── index.ts                ← ApiResponse, ConfigURL
│   ├── Cliente/
│   └── Creditos/
└── components/
    ├── BuscarCliente/
    ├── ClienteHeader/
    ├── ColumnSearch/
    ├── DomicilioDestinatario/
    ├── DomicilioRemitente/
    ├── EnvaseInput/
    ├── FilialesCreditosAutocompletar/
    ├── LocalidadesAutocompletar/
    ├── ResumenVentaPrepago/
    ├── SelectCredito/
    └── VentaPrepagoTabs/

API pública

Provider

| Export | Descripción | |--------|-------------| | EnvProvider | Proveedor de contexto global. Recibe sistema, token, urlApi y config. | | useEnvironment | Hook para consumir el contexto de EnvProvider. |

Hooks

| Export | Descripción | |--------|-------------| | useQuery | Consultas GET. Soporta autoFetch, refetch, callbacks onSuccess / onError. | | useMutate | Mutaciones POST/PUT/DELETE. Redirige a /login si el JWT expira. |

Componentes

| Export | Descripción | |--------|-------------| | BuscarCliente | Buscador de clientes con modal y autocompletado. | | ClienteHeader | Cabecera con datos del cliente seleccionado. | | ColumnSearch | Filtro de búsqueda para columnas de tablas Ant Design. | | DomicilioDestinatario | Selector de domicilio del destinatario. | | DomicilioRemitente | Selector de domicilio del remitente (última filial). | | EnvaseInput | Input con validación de envases. | | FilialesCreditosAutocompletar | Autocompletado de filiales con créditos. | | LocalidadesAutocompletar | Autocompletado de localidades contra la API. | | ResumenVentaPrepago | Resumen de una venta prepago. | | SelectCredito | Selector de créditos con modal de disponibles. | | VentaPrepagoTabs | Tabs de venta prepago (créditos + envases). |

Desarrollo

# Compilar
npm run build

# Lint
npm run lint

# Generar solo tipos
npm run generate:types

Después de cada cambio, publicar con npm publish para que las apps consumidoras lo reciban.

Tipos principales

interface ApiResponse {
  status: string
  message?: string
  data?: any
}