@amsintegra/design-system 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,43 @@
+# Changelog
+
+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).
+
+## [1.0.0] - 2026-09-23
+
+First public release of the AMS Integra Design System, published to npm as
+`@amsintegra/design-system` under the MIT license.
+
+### Added
+
+- **Theme layer** built on Ant Design v5 with the B2BMX (Metronic) brand:
+  - `AmsConfigProvider` — single root provider that applies the theme and the
+    antd `App` context (context-safe `message` / `notification` / `Modal`).
+  - `buildTheme` and Metronic design tokens (`primitives`, `semantic`, `radius`,
+    `typography`, `sizing`); primary `#A72432`, Inter typeface, 13px base.
+  - Light and dark modes via the `mode` prop on `AmsConfigProvider`.
+- **Full Ant Design v5 component coverage** — 76 components re-exported as typed
+  wrappers with the theme applied (General, Layout, Navigation, Data Entry,
+  Data Display, Feedback, and others).
+- **AMS composites** consolidating patterns already used across the
+  microfrontends: `DataTable`, `ModalDialog`, `FilterSelect`,
+  `FileUploadDragger`, `PageHeader`, `DownloadButton`, `ConfirmModal`,
+  `ThemeToggle`.
+- **Hooks**: `useAmsMessage`, `useAmsNotification`, `useControllableState`.
+- **Storybook v10** (`@storybook/react-vite`) with a story per component, MDX
+  docs (Introducción, Componentes, Tema y modo oscuro, Instalación, Uso,
+  Publicación) and the `Pilot/Consulta de Facturas` example, plus the a11y,
+  themes and docs addons.
+- **Packaging** with tsup: dual ESM + CJS output and TypeScript declarations.
+  React, antd, `@ant-design/icons` and `dayjs` are declared as
+  `peerDependencies` so the library reuses the consumer's versions (critical
+  under Module Federation) and npm 7+ installs them automatically in projects
+  that do not already have them.
+- **`llms.txt`** at the package root — a concise, machine-readable usage guide
+  so AI assistants can discover and interpret how to use the library (imports,
+  golden rules, setup) when the dedicated skill is not available. Shipped inside
+  the published npm package.
+
+[1.0.0]: https://bitbucket.org/amsintegra/design-system/src/main/

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 AMS Integra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,188 @@
+# @amsintegra/design-system
+
+Sistema de diseño de React para la plataforma B2BMX de AMS Integra. Está construido sobre **Ant Design v5** con el tema de marca **Metronic** (primario `#A72432`, tipografía Inter, base de 13px) e incluye **Storybook** para explorar y documentar cada componente.
+
+Cubre **todos los componentes de Ant Design v5** como wrappers/re-exports tipados con el tema aplicado, más composites propios que consolidan patrones ya usados en los microfrontends.
+
+## Requisitos
+
+- Node.js >= 18
+- React 18.3, antd 5.28, `@ant-design/icons` 5.x y `dayjs` en el proyecto consumidor (son **peer dependencies**).
+
+## Instalación
+
+```bash
+npm install @amsintegra/design-system
+```
+
+Eso alcanza. `antd`, `@ant-design/icons`, `dayjs`, `react` y `react-dom` están
+declarados como **peer dependencies**, así que:
+
+- **Proyecto React sin antd** → npm 7+ instala los peers automáticamente al
+  correr `npm install @amsintegra/design-system`. No hay que instalarlos a mano.
+- **Microfrontend con Module Federation** (donde React/antd ya existen) → el
+  peer se satisface con la copia que ya tiene el host, sin duplicar instancias.
+
+Declarar React y antd como peers (y no como dependencias directas) es lo que
+evita **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.
+
+Si tu gestor no resuelve los peers de forma automática (por ejemplo con un
+conflicto de versiones), instalálos explícitamente:
+
+```bash
+npm install antd @ant-design/icons dayjs react react-dom
+```
+
+## 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`):
+
+```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>
+  );
+}
+```
+
+Luego importa componentes con named imports:
+
+```tsx
+import { Button, DataTable, ModalDialog, FilterSelect } from '@amsintegra/design-system';
+```
+
+Modo oscuro:
+
+```tsx
+<AmsConfigProvider mode="dark">…</AmsConfigProvider>
+```
+
+Toasts context-safe (sin el warning de método estático de antd v5):
+
+```tsx
+import { useAmsMessage } from '@amsintegra/design-system';
+
+function Guardar() {
+  const message = useAmsMessage();
+  return <Button onClick={() => message.success('Guardado')}>Guardar</Button>;
+}
+```
+
+## Qué incluye
+
+- **Tema**: `AmsConfigProvider`, `buildTheme`, tokens de Metronic (`primitives`, `semantic`, `radius`, `typography`, `sizing`).
+- **Todos los componentes de antd v5** 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`.
+
+El inventario completo con estado por componente está en [`plan/03-component-inventory.md`](./plan/03-component-inventory.md).
+
+## Desarrollo
+
+```bash
+npm install              # instala dependencias
+npm run storybook        # levanta Storybook en http://localhost:6006
+npm run test             # corre los tests (Vitest)
+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
+```
+
+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.
+
+```bash
+npm login                # autenticación en npmjs.com (requiere permiso en el scope @amsintegra)
+npm publish              # publica la versión actual de package.json
+```
+
+> 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:
+
+```bash
+npm run pack:tarball     # genera amsintegra-design-system-<version>.tgz
+# en el proyecto consumidor:
+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 v5 + composites AMS
+- ✅ Storybook con story por componente y un piloto (`Pilot/Consulta de Facturas`)
+- ✅ Empaquetado listo para publicar (`@amsintegra/design-system`)
+
+Detalles y roadmap en [`plan/`](./plan).