@amsintegra/design-system 1.1.1 → 2.0.1

package/CHANGELOG.md

@@ -5,6 +5,89 @@ All notable changes to `@amsintegra/design-system` are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.1] - 2026-10-15
+
+Default theme is now the AMS brand (red); the primary button moves to a dark
+neutral so that red stays reserved for danger (resolves AMSSLO-1181). Supersedes
+the unpublished `2.0.0`, whose version number cannot be reused on the registry.
+
+### Changed (BREAKING)
+
+- **`Tema` now requires `color_peligro`.** The danger red (destructive buttons and
+  error text) is a themeable token instead of a hardcoded literal. Any caller that
+  builds a `Tema` object must provide `color_peligro`.
+- **Default theme is the brand red** (`--tema-primario` `#A72432`), not the neutral
+  emerald, so AI-generated screens come themed by default. `TEMA_DEFAULT` and the
+  `:root` in `tokens.css` are kept in sync.
+- **Primary button no longer uses the brand red.** `CLASE_BOTON_PRIMARIO`,
+  `CLASE_BOTON_PRIMARIO_COMPACTO`, the `Dialogo` primary trigger and the
+  `PantallaAcceso` login button fill with the dark neutral `var(--tema-texto)`.
+
+### Added
+
+- **`--tema-peligro` token** (`Tema.color_peligro` / `variablesDeTema`), declared in
+  `tokens.css` (`:root` + `@theme inline`). `CLASE_BOTON_PELIGRO`, `CLASE_ERROR_CAMPO`
+  and the error text in `Insignia`, `Avisos`, `BotonAccionAviso` and `PantallaAcceso`
+  consume it; `--texto-error` is now an alias of `--tema-peligro`.
+- **`docs/criterio-color-acciones.md`** — official criterion for normal vs. dangerous
+  actions when the brand is red (red reserved for danger; normal in dark neutral;
+  reinforced by shape, icon and text).
+
+## [2.0.0] - 2026-10-14
+
+Full rebuild of the library. The Ant Design v6 + Metronic foundation is replaced by
+a Tailwind CSS v4 component set based on the `kit-ui-plataforma` guidelines.
+
+### Changed (BREAKING)
+
+- **Styling foundation is now Tailwind CSS v4 with COMPILED CSS.** Consumers import
+  `@amsintegra/design-system/styles.css` once and do **not** need Tailwind installed
+  or configured. Brand colors remain CSS variables (`--tema-*`) overridable via
+  `variablesDeTema()`.
+- **Peer dependencies replaced**: `antd`, `@ant-design/icons` and `dayjs` are removed.
+  New peers are `react`, `react-dom` and `lucide-react` (the single icon library).
+- **Component surface replaced**: the antd wrapper components (Button, DataTable,
+  Modal, Form, …) and `AmsConfigProvider` are gone. The public API is now the kit:
+  `CascaronApp`, `MarcoTabla`, `TablaConfigurable`, `PaginaListado`, `BarraListado`,
+  `Insignia`, `Tarjeta`, `Metrica`, `Aviso`, `ModalPanel`, `PantallaAcceso`,
+  `InfoExplicacion`, the `ICONO_*` constants, formatting helpers and canonical
+  `CLASE_*` strings.
+- **New `./styles.css` export** added to `package.json` `exports`.
+
+### Added
+
+- **Framework-agnostic adapters.** Components previously coupled to Next.js are
+  decoupled: `LinkComponentProvider` injects a router link (default `<a>`), and
+  `ListadoNavProvider` wires listing navigation (`ir`/`params`/`pendiente`) to any
+  router or local state. The pure helpers `leerListado`, `aplicarListado` and
+  `hrefListado` remain for URL-driven listings.
+- **Compiled stylesheet** `dist/styles.css` produced by the Tailwind v4 CLI,
+  scanning the kit sources so no utility is purged.
+
+### Removed
+
+- `src/components` (antd wrappers), `src/theme` (`AmsConfigProvider`, Metronic
+  tokens), `src/pilot`, old `src/hooks`, antd-specific docs and scaffolding scripts.
+
+### Known limitations
+
+- Storybook needs the Tailwind Vite/PostCSS plugin wired to process the stylesheet
+  before stories render with full styling; no component stories ship in this version.
+- No component unit tests ship yet (the antd wrapper tests were removed with their
+  components). `npm test` passes with no test files.
+
+## [1.1.2] - 2026-10-10
+
+### Added
+
+- **UI design guidelines** (`docs/lineamientos-ui.md`). A screen-design guide that
+  complements the component reference in `docs/skills/ams-design-system/SKILL.md`:
+  how to design with the design system (density, semantic color, typography, data
+  presentation, empty/loading/error states, accessibility and tone), expressed
+  against the real stack (Ant Design v6, Metronic theme — primary `#A72432`, Inter
+  13px, `@ant-design/icons`) and the theme tokens in `src/theme/tokens.ts`. No
+  Tailwind, Lucide or hardcoded brand colors.
+
 ## [1.1.1] - 2026-09-30
 
 ### Fixed

package/README.md

@@ -1,18 +1,14 @@
 # @amsintegra/design-system
 
-Sistema de diseño de React para la plataforma B2BMX de AMS Integra. Está construido sobre **Ant Design v6** con el tema de marca **Metronic** (primario `#A72432`, tipografía Inter, base de 13px) e incluye **Storybook** para explorar y documentar cada componente.
+Sistema de diseño de React para AMS Integra, construido con **Tailwind CSS v4** sobre los lineamientos de `kit-ui-plataforma`. La librería **envía su CSS ya compilado**: el proyecto que la consume importa una hoja de estilos y **no necesita tener Tailwind instalado ni configurado**.
 
-Cubre **todos los componentes de Ant Design v6** como wrappers/re-exports tipados con el tema aplicado, más composites propios que consolidan patrones ya usados en los microfrontends.
+Incluye el cascarón de aplicación (menú lateral colapsable), tablas con columnas fijas, filtros, insignias, tarjetas KPI, modales, estados de carga/vacío/error, íconos de explicación (i) y la pantalla de acceso. Los componentes son agnósticos del framework: no dependen de Next.js.
 
 > ### 📦 Se instala en cada proyecto
 >
-> Este es un paquete de librería: **cada proyecto que lo use tiene que instalarlo
-> por su cuenta**. No es algo que se instale una sola vez y quede disponible para
-> todos los proyectos. Cuando arranques un portal o microfrontend nuevo, corré la
-> instalación de abajo dentro de _ese_ proyecto.
->
-> Es una dependencia normal de la app (sus componentes se renderizan en runtime),
-> así que va en `dependencies`, no en `devDependencies`.
+> Es un paquete de librería: **cada proyecto que lo use lo instala por su cuenta**.
+> Sus componentes se renderizan en runtime, así que va en `dependencies`, no en
+> `devDependencies`.
 
 ## Instalación
 
@@ -22,159 +18,112 @@ Cubre **todos los componentes de Ant Design v6** como wrappers/re-exports tipado
 npm install @amsintegra/design-system
 ```
 
-### 2. Asegurate de tener sus peers
-
-La librería necesita que tu proyecto tenga estas piezas (son **peer dependencies**,
-o sea que las comparte con tu app en vez de traer su propia copia):
+### 2. Instalá sus peers
 
 | Peer | Versión |
 |------|---------|
-| `react` / `react-dom` | 18, 19 o 20 |
-| `antd` | 6 |
-| `@ant-design/icons` | 6 |
-| `dayjs` | 1.11+ |
-
-- **Si tu proyecto ya tiene React y antd 6** (por ejemplo un portal con Next.js):
-  no hacés nada más, la librería usa los que ya tenés.
-- **Si te falta alguno**, instalalos de una:
+| `react` / `react-dom` | 18 o 19 |
+| `lucide-react` | 1 (única librería de íconos) |
 
-  ```bash
-  npm install antd@^6 @ant-design/icons@^6 dayjs react react-dom
-  ```
+```bash
+npm install react react-dom lucide-react
+```
 
-> **Ojo con antd:** tiene que ser la **versión 6**, igual que `@ant-design/icons`
-> (icons 6 no funciona con antd 5). Y antd 6 pide React 18 o superior.
->
 > Requiere **Node.js 18 o superior** para desarrollar.
 
-<details>
-<summary>¿Por qué peer dependencies y no dependencias normales?</summary>
+### 3. Importá la hoja de estilos UNA vez
 
-Declarar React y antd como peers (en vez de empaquetarlos dentro de la librería)
-evita terminar con **dos instancias de React/antd** en runtime —el clásico
-`Invalid hook call` y los contextos de tema duplicados— cuando la librería se
-consume bajo Module Federation. La librería reutiliza la copia que ya tiene tu app.
-</details>
+En el punto de entrada de tu app (por ejemplo `main.tsx`, o el layout raíz):
+
+```ts
+import "@amsintegra/design-system/styles.css";
+```
+
+Eso trae los tokens (variables CSS), las utilidades que usan los componentes y las reglas globales (tablas fijas, spinner de marca, feedback de botón, impresión). No hace falta Tailwind en tu proyecto.
 
 ## Uso
 
-Envuelve la app una sola vez en la raíz con `AmsConfigProvider` (aplica el tema y el contexto de antd `App` para `message`/`notification`/`Modal`):
+Importá los componentes con named imports:
 
 ```tsx
-import { AmsConfigProvider, Button, DataTable } from '@amsintegra/design-system';
-import esES from 'antd/locale/es_ES';
-
-export function Root({ children }) {
-  return (
-    <AmsConfigProvider mode="light" locale={esES}>
-      {children}
-    </AmsConfigProvider>
-  );
+import { Insignia, Tarjeta, Metrica, CascaronApp } from "@amsintegra/design-system";
+
+export function Estado() {
+  return <Insignia tono="exito" info="plataforma.rol">Activo</Insignia>;
 }
 ```
 
-Luego importa componentes con named imports:
+### Marca (tema)
+
+Los colores de marca son variables CSS (`--tema-primario`, `--tema-acento`, etc.) con un verde esmeralda neutro por defecto. Se sobrescriben **sin tocar componentes**, inyectándolas en `<html>`:
 
 ```tsx
-import { Button, DataTable, ModalDialog, FilterSelect } from '@amsintegra/design-system';
+import { variablesDeTema, TEMA_DEFAULT } from "@amsintegra/design-system";
+
+<html style={variablesDeTema({ ...TEMA_DEFAULT, color_primario: "#A72432" })} />
 ```
 
-Modo oscuro:
+### Enlaces y routing (agnóstico del framework)
+
+Por defecto los componentes de navegación renderizan un `<a>` normal. Si usás un router con cliente (Next, React Router), inyectá su `Link` una vez:
 
 ```tsx
-<AmsConfigProvider mode="dark">…</AmsConfigProvider>
+import { LinkComponentProvider } from "@amsintegra/design-system";
+import NextLink from "next/link";
+
+<LinkComponentProvider value={NextLink}>{children}</LinkComponentProvider>
 ```
 
-Toasts context-safe (sin el warning de método estático de antd):
+### Listados con estado en la URL
+
+Los componentes `BarraListado`, `PaginadorUrl` y `EncabezadoOrdenUrl` leen y escriben la navegación a través de un contexto, así funcionan con cualquier router o con estado local:
 
 ```tsx
-import { useAmsMessage } from '@amsintegra/design-system';
+import { ListadoNavProvider } from "@amsintegra/design-system";
 
-function Guardar() {
-  const message = useAmsMessage();
-  return <Button onClick={() => message.success('Guardado')}>Guardar</Button>;
-}
+<ListadoNavProvider value={{ ir, pendiente, params }}>
+  {/* tu pantalla de listado */}
+</ListadoNavProvider>
 ```
 
-## Qué incluye
+`ir(cambios, { scroll })` aplica cambios sobre la query actual; `params` es un `URLSearchParams`; `pendiente` indica navegación en curso. Las funciones puras `leerListado`, `aplicarListado` y `hrefListado` ayudan a derivar el estado y las URLs.
 
-- **Tema**: `AmsConfigProvider`, `buildTheme`, tokens de Metronic (`primitives`, `semantic`, `radius`, `typography`, `sizing`).
-- **Todos los componentes de antd v6** como re-exports tipados (General, Layout, Navigation, Data Entry, Data Display, Feedback y otros).
-- **Composites AMS**: `DataTable`, `ModalDialog`, `FilterSelect`, `FileUploadDragger`, `PageHeader`, `DownloadButton`, `ConfirmModal`.
-- **Hooks**: `useAmsMessage`, `useAmsNotification`, `useControllableState`.
+## Qué incluye
 
-El inventario completo con estado por componente está en [`plan/03-component-inventory.md`](./plan/03-component-inventory.md).
+- **Tokens y marca**: `variablesDeTema`, `TEMA_DEFAULT`, `NOMBRE_PRODUCTO_DEFAULT`.
+- **Cascarón y navegación**: `CascaronApp`, `SidebarColapsable`, `EnlaceNav`, `Migas`, `SubNav`.
+- **Tablas**: `MarcoTabla`, `TablaConfigurable`, `CeldaIdentidad`, `AccionesFila`, `EncabezadoOrdenUrl`, `col`, `fija`.
+- **Listados**: `PaginaListado`, `BarraListado`, `PaginadorUrl`, `PaginadorLocal`.
+- **Piezas**: `Insignia`, `Tarjeta`, `Metrica`, `MetricaKpi`, `GrupoMetricas`, `Aviso`, `ModalPanel`, `Dialogo`, `Pestanas`, `PopoverHover`.
+- **Estados**: `OverlayCargando`, `PantallaCargando`, `SpinnerMarca`, `EstadoVacio`, `NoDisponible`, `BarraProgreso`.
+- **Acceso**: `PantallaAcceso`.
+- **Explicaciones (i)**: `InfoExplicacion`, catálogo `EXPLICACIONES`, `explicacionDe`, `verificarCatalogo`.
+- **Íconos**: constantes semánticas `ICONO_*` (sobre `lucide-react`).
+- **Formatos**: `formatoMxn`, `formatoNumero`, `formatoPct`, `formatearFechaHora`, `formatearBytes`, etc.
+- **Clases canónicas**: `CLASE_BOTON_PRIMARIO`, `CLASE_CAMPO`, `CLASE_TARJETA`, etc.
 
 ## Desarrollo
 
 ```bash
 npm install              # instala dependencias
-npm run storybook        # levanta Storybook en http://localhost:6006
-npm run test             # corre los tests (Vitest)
+npm run build            # build completo: CSS (Tailwind v4) + JS/tipos (tsup)
+npm run build:css        # solo la hoja de estilos -> dist/styles.css
+npm run build:js         # solo JS (ESM + CJS) + tipos
 npm run typecheck        # tsc --noEmit
-npm run build            # build de la librería (ESM + CJS + tipos) con tsup
-npm run build-storybook  # Storybook estático (para publicar la doc)
-```
-
-## Storybook
-
-Storybook (v10, `@storybook/react-vite`) es la documentación viva del design
-system: una story por componente, docs en MDX y un piloto de pantalla real
-(`Pilot/Consulta de Facturas`). Incluye los addons de accesibilidad (a11y),
-themes (light/dark) y docs.
-
-### Desarrollo local
-
-```bash
-npm run storybook
-```
-
-Levanta el servidor en `http://localhost:6006` con hot reload.
-
-### Build del sitio estático
-
-```bash
-npm run build-storybook
+npm run test             # tests (Vitest)
+npm run storybook        # Storybook en http://localhost:6006
 ```
 
-Genera el sitio en `storybook-static/`. Esa carpeta es un sitio estático
-autocontenido que se puede servir con cualquier hosting de estáticos.
-
-### Despliegue
-
-Publicá el contenido de `storybook-static/` en el hosting que use el equipo:
-
-- **Servir localmente para revisar el build**:
-
-  ```bash
-  npx http-server storybook-static
-  ```
-
-- **Bitbucket Pages / hosting estático**: subí el contenido de
-  `storybook-static/` como artefacto del pipeline.
-- **Netlify / Vercel / S3+CloudFront**: apuntá el directorio de publicación a
-  `storybook-static` y el comando de build a `npm run build-storybook`.
-
-> `storybook-static/` está en `.gitignore` — es un artefacto de build, no se
-> commitea. Se regenera en cada despliegue.
-
 ## Publicación
 
-El paquete se publica en el **registry público de npm** bajo el scope
-`@amsintegra`, con acceso público (`publishConfig.access = "public"`).
-`prepublishOnly` corre typecheck + tests + build automáticamente, así que no se
-publica un build roto.
+El paquete se publica en el registry público de npm bajo el scope `@amsintegra`. `prepublishOnly` corre typecheck + tests + build, así no se publica un build roto.
 
 ```bash
-npm login                # autenticación en npmjs.com (requiere permiso en el scope @amsintegra)
-npm publish              # publica la versión actual de package.json
+npm login
+npm publish
 ```
 
-> El scope `@amsintegra` debe existir en npm y tu cuenta necesita permiso de
-> publicación en él. Una versión publicada es prácticamente inmutable: no se
-> puede re-publicar el mismo número con otro contenido.
-
-Generar un tarball para entregar/instalar sin registry:
+Tarball para instalar sin registry:
 
 ```bash
 npm run pack:tarball     # genera amsintegra-design-system-<version>.tgz
@@ -182,28 +131,10 @@ npm run pack:tarball     # genera amsintegra-design-system-<version>.tgz
 npm install /ruta/al/amsintegra-design-system-<version>.tgz
 ```
 
-## Para asistentes de IA
-
-En la raíz del paquete hay un [`llms.txt`](./llms.txt): una guía concisa y legible
-por máquina para que un asistente de IA descubra e interprete cómo usar la librería
-(imports, reglas de oro, setup) aunque no tenga la skill dedicada. Se incluye dentro
-del paquete publicado en npm, así que también aparece en `node_modules`. La
-referencia completa por componente vive en
-[`docs/skills/ams-design-system/SKILL.md`](./docs/skills/ams-design-system/SKILL.md).
-
-## Changelog
-
-El historial de versiones está en [`CHANGELOG.md`](./CHANGELOG.md).
-
 ## Licencia
 
 [MIT](./LICENSE) © AMS Integra
 
-## Estado
-
-- ✅ Tema (light + dark, tokens Metronic)
-- ✅ Cobertura completa de componentes antd v6 + composites AMS
-- ✅ Storybook con story por componente y un piloto (`Pilot/Consulta de Facturas`)
-- ✅ Empaquetado listo para publicar (`@amsintegra/design-system`)
+## Changelog
 
-Detalles y roadmap en [`plan/`](./plan).
+El historial de versiones está en [`CHANGELOG.md`](./CHANGELOG.md).