{"_id":"@dealpulsehub/design-system","name":"@dealpulsehub/design-system","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@dealpulsehub/design-system","version":"1.0.0","description":"A modern, type-safe React Design System with automated design tokens, Figma sync, and production-ready components","author":{"name":"Oscar Delgado","email":"contact@dealpulsehub.net"},"license":"MIT","homepage":"https://github.com/Dealpulsehub/DEALPULSEHUB","repository":{"type":"git","url":"git+https://github.com/Dealpulsehub/DEALPULSEHUB.git"},"bugs":{"url":"https://github.com/Dealpulsehub/DEALPULSEHUB/issues"},"keywords":["design-system","react","typescript","components","ui","tokens","figma","design"],"main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"},"./components":{"import":"./dist/components/index.js","types":"./dist/components/index.d.ts"},"./tokens":{"import":"./dist/tokens/index.js","types":"./dist/tokens/index.d.ts"}},"scripts":{"dev":"storybook dev -p 6006","dev:api":"ts-node src/api/server.ts","dev:cli":"node src/cli/index.js","build":"tsc -p tsconfig.build.json && npm run build-tokens","build-tokens":"node scripts/build-tokens.js","build-storybook":"npm run build-tokens && storybook build","type-check":"tsc --noEmit","test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage","figma:sync":"node scripts/figma-sync.js","penpot:extract":"node scripts/penpot-extract.js","lint":"eslint src","prepublish":"npm run build && npm run type-check","api":"ts-node src/api/server.ts","api:phase2":"node src/api/server-phase2.js","api:phase3":"node src/api/server-phase3.js","api:phase4":"node src/api/server-phase4.js","demo:phase2":"node src/api/demo-phase2.js","demo:phase3":"node src/api/demo-phase3.js","demo:phase4":"node src/api/demo-phase4.js","cli":"node src/cli/index.js"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"axios":"^1.6.0","cli-table3":"^0.6.5","commander":"^11.1.0","cors":"^2.8.6","dotenv":"^16.6.1","express":"^5.2.1","framer-motion":"^13.1.0","lottie-react":"^2.4.1","react-intersection-observer":"^11.0.0","uuid":"^14.0.1"},"devDependencies":{"@storybook/addon-a11y":"^7.6.0","@storybook/addon-essentials":"^7.6.0","@storybook/addon-interactions":"^7.6.0","@storybook/react":"^7.6.0","@storybook/react-webpack5":"^7.6.0","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^14.3.1","@types/cors":"^2.8.19","@types/jest":"^29.5.14","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","eslint":"^9.39.5","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^5.2.0","jest":"^29.7.0","jest-environment-jsdom":"^29.7.0","react":"^18.2.0","react-dom":"^18.2.0","ts-jest":"^29.4.12","ts-node":"^10.9.2","typescript":"^5.3.0","typescript-eslint":"^8.66.0"},"engines":{"node":">=16.0.0","npm":">=7.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"gitHead":"6866d134b5f4f2969bd7cd23d8d986fc6fdd441e","_id":"@dealpulsehub/design-system@1.0.0","_nodeVersion":"25.8.0","_npmVersion":"11.11.0","dist":{"integrity":"sha512-8GG9ZXQsOSNydIXjH4QdDtRvpbDKOXQb+MHumpS7ueXwM4FD0tLbc/CFEgEqYW8CHYwAYCNIrsG4gnzHFLYToQ==","shasum":"881a533f86390caed764c85d09a1d85b90c725ca","tarball":"https://registry.npmjs.org/@dealpulsehub/design-system/-/design-system-1.0.0.tgz","fileCount":36,"unpackedSize":46126,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGMmUA1whrtEhNQKcTB3Iuw2gfxIJ7VtTnJGGchM6LUoAiAPrZ/2lbhaxy6oMAvR1DZ09SZPsP+MMWCaeC00yeJLfg=="}]},"_npmUser":{"name":"empresarios.imparables2026","email":"empresarios.imparables2026@gmail.com"},"directories":{},"maintainers":[{"name":"empresarios.imparables2026","email":"empresarios.imparables2026@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_1.0.0_1786383894843_0.10631385519241654"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-10T17:44:54.682Z","1.0.0":"2026-08-10T17:44:54.976Z","modified":"2026-08-10T17:44:55.185Z"},"maintainers":[{"name":"empresarios.imparables2026","email":"empresarios.imparables2026@gmail.com"}],"description":"A modern, type-safe React Design System with automated design tokens, Figma sync, and production-ready components","homepage":"https://github.com/Dealpulsehub/DEALPULSEHUB","keywords":["design-system","react","typescript","components","ui","tokens","figma","design"],"repository":{"type":"git","url":"git+https://github.com/Dealpulsehub/DEALPULSEHUB.git"},"author":{"name":"Oscar Delgado","email":"contact@dealpulsehub.net"},"bugs":{"url":"https://github.com/Dealpulsehub/DEALPULSEHUB/issues"},"license":"MIT","readme":"# 🎨 DealPulseHub\n\nRepositorio con **4 sistemas relacionados**: un Design System React publicable, un backend\nde orquestación multi-agente (\"Sistema Antigravity\"), integración de producción de mockups\nvía Penpot MCP, y la metodología divisional que gobierna cómo se decide el trabajo.\n\n> 🗺️ **Mapa completo de los 4 sistemas:** [`.claude/rules/ARCHITECTURE_MAP.md`](.claude/rules/ARCHITECTURE_MAP.md)\n> — léelo primero si vas a trabajar en este repo por primera vez.\n\n---\n\n## 1️⃣ Design System (React + TypeScript)\n\nSistema de diseño moderno, type-safe, con tokens automatizados. Construido con **React 18**,\n**TypeScript 5**, y tokens de diseño centralizados.\n\n### ✨ Features\n\n- ✅ **5 Componentes React** — Type-safe y totalmente customizables\n- ✅ **28+ Design Tokens** — Sistema de diseño centralizado\n- ✅ **Auto-generated** — Tokens TypeScript + CSS automáticos\n- ✅ **Figma Sync** — Sincronización automática cada hora\n- ✅ **33 tests automatizados** (Jest + Testing Library)\n- ⚠️ **Aún no publicado a npm** pese al `publishConfig` en `package.json` (pendiente decisión)\n\n### 🚀 Quick Start\n\n```bash\nnpm install\nnpm run dev          # Storybook interactivo en localhost:6006\nnpm test             # 33 tests, 5 suites\nnpm run build        # Compila TypeScript + genera tokens\n```\n\nAbre `demo.html` en tu navegador para un showcase visual sin instalar nada.\n\n### 📦 Componentes Disponibles\n\n#### Button\n```tsx\n<Button variant=\"primary\" size=\"md\">Click me</Button>\n```\n**Variantes:** primary | secondary | ghost — **Tamaños:** sm | md | lg\n\n#### Card\n```tsx\n<Card>\n  <h2>Title</h2>\n  <p>Content</p>\n</Card>\n```\n\n#### Input\n```tsx\n<Input type=\"email\" placeholder=\"Enter email...\" />\n```\n**Tipos:** text | email | password | number\n\n#### Badge\n```tsx\n<Badge variant=\"success\">Active</Badge>\n```\n**Variantes:** primary | success | warning | error\n\n#### Typography\n```tsx\n<Heading1>Main Title</Heading1>\n<Heading2>Subtitle</Heading2>\n<Paragraph>Body text</Paragraph>\n```\n\nTambién incluye componentes de animación (`AnimatedHero`, `FadeInText`, `ParallaxSection`,\n`ScrollReveal`, `LottieAnimation`) basados en `framer-motion` / `lottie-react` / `react-intersection-observer`.\n\n### 🎨 Design Tokens\n\n```tsx\nimport { colors, spacing, typography, borderRadius, shadows } from './src/tokens';\n\ncolors.primary[500]      // #6366f1\ncolors.semantic.success  // #10b981\nspacing.xs                // 4px\nspacing.md                // 16px\ntypography.fontSize.base  // 16px\nborderRadius.md            // 8px\nshadows.md                  // 0 4px 6px -1px rgba(0,0,0,0.1)\n```\n\n---\n\n## 2️⃣ Sistema Antigravity (backend de orquestación de agentes)\n\nBackend interno (`src/orchestration/`, `src/quality/`, `src/security/`, `src/clients/`,\n`src/integration/`, `src/metrics/`, `src/audit/`) que coordina tareas entre agentes GRAVX/AIOX,\nvalida calidad, audita decisiones y gestiona clientes/proyectos.\n\n```bash\nnpm run dev:api        # API Fase 1 (task queue simple) — dev, vía ts-node\nnpm run api             # API Fase 1 — producción, requiere `npm run build` antes\nnpm run api:phase4      # API Fase 4 COMPLETA — 40+ endpoints (bridge/security/clients/workflow)\nnpm run demo:phase4     # Demo del workflow end-to-end (console.log, no es un test)\n```\n\nDetalle completo, incluyendo qué endpoints expone cada fase y un bug conocido pendiente\nde arreglar en el workflow end-to-end: ver `.claude/rules/ARCHITECTURE_MAP.md` sección 2.\n\n---\n\n## 3️⃣ Penpot MCP (producción de mockups vía IA)\n\nIntegración con Penpot para crear mockups de campaña (product boxes, order bumps, tripwires,\netc.) programáticamente vía Claude + MCP, más un script de extracción REST de respaldo.\n\n```bash\nnpm run penpot:extract   # Extrae/exporta assets vía API REST (requiere PENPOT_API_KEY en .env)\n```\n\nProtocolo completo (setup, helpers de código, neuro-auditoría de contraste WCAG):\n`C:\\Users\\Oscar\\.claude\\rules\\PENPOT_MCP_PRODUCTION_PROTOCOL.md` (global, aplica a cualquier proyecto).\n\n---\n\n## 4️⃣ Metodología (Opción C Divisional)\n\nFramework de decisión (roles CPS/CCO/CXO/CAO, gates de aprobación, autonomía por división)\nque gobierna cómo se ejecuta el trabajo sobre los 3 sistemas de código de arriba.\nVer `.claude/rules/ORGANIZATIONAL_STRUCTURE_DIVISIONAL.md`.\n\n---\n\n## 📁 Estructura de Carpetas (real, no simplificada)\n\n```\nDealPulseHub/\n├── src/\n│   ├── components/          # Design System — componentes + tests + stories\n│   ├── tokens/               # tokens.json (fuente) → tokens.ts / tokens.css (generados)\n│   ├── styles/\n│   ├── hooks/                 # useAnimation, etc.\n│   ├── api/                    # server.ts (Fase 1) + server-phase2/3/4.js (Antigravity)\n│   ├── orchestration/       # Sistema Antigravity\n│   ├── quality/\n│   ├── security/\n│   ├── clients/\n│   ├── integration/\n│   ├── metrics/\n│   └── audit/\n├── scripts/\n│   ├── build-tokens.js      # Generador de tokens (JSON → TS/CSS)\n│   ├── figma-sync.js         # Figma → tokens (dirección: Figma → código)\n│   └── penpot-extract.js    # Penpot → assets (extracción REST)\n├── .github/workflows/       # deploy-storybook.yml, figma-sync.yml\n├── docs/                        # Documentación detallada por tema\n├── .claude/rules/             # Arquitectura, metodología, protocolos (ver ARCHITECTURE_MAP.md)\n├── jest.config.js, tsconfig.json, eslint.config.js\n└── package.json\n```\n\n## 🛠️ Scripts Disponibles (completo)\n\n```bash\n# Design System\nnpm run dev              # Storybook\nnpm run build             # tsc + build-tokens\nnpm run build-tokens      # Regenerar tokens.ts/css desde tokens.json\nnpm run build-storybook  # Build estático de Storybook\nnpm test                    # Jest (33 tests)\nnpm run test:watch\nnpm run test:coverage\nnpm run type-check       # tsc --noEmit\nnpm run lint                # ESLint\n\n# Backend Antigravity\nnpm run dev:api | api                       # Fase 1 (dev / prod)\nnpm run api:phase2 | api:phase3 | api:phase4  # Fases 2-4\nnpm run demo:phase2 | demo:phase3 | demo:phase4  # Demos (no son tests)\nnpm run cli | dev:cli                        # CLI\n\n# Integraciones\nnpm run figma:sync         # Figma → tokens\nnpm run penpot:extract    # Penpot → assets\n```\n\n## 🔄 Figma Integration\n\n**Auto-sync cada hora** vía GitHub Actions — los cambios en Figma se sincronizan a `src/tokens/figma-tokens.json`.\n\nSetup: token en `.env` como `FIGMA_TOKEN` (local) o Secret de GitHub `FIGMA_TOKEN` (CI) — **nunca en `figma-config.json`** (ese archivo solo debe tener el placeholder `SET_VIA_ENV_FIGMA_TOKEN`).\n\nVer [`docs/FIGMA_INTEGRATION.md`](docs/FIGMA_INTEGRATION.md)\n\n## 📚 Documentación Completa\n\n- [**Architecture Map**](.claude/rules/ARCHITECTURE_MAP.md) — los 4 sistemas explicados\n- [**Componentes**](docs/COMPONENTS.md) — Guía detallada\n- [**Tokens**](docs/TOKENS.md) — Sistema de diseño\n- [**Best Practices**](docs/BEST_PRACTICES.md) — Patrones recomendados\n- [**Ejemplos Avanzados**](docs/ADVANCED_EXAMPLES.md) — Casos de uso\n- [**Figma Integration**](docs/FIGMA_INTEGRATION.md) — Sync automático\n- [**NPM Publishing**](docs/NPM_PUBLISHING.md) — Checklist previo a publicar (aún no ejecutado)\n- [**Contributing**](docs/CONTRIBUTING.md) — Cómo contribuir\n\n## 🔐 Type Safety\n\n100% type-safe con TypeScript (`npm run type-check` pasa limpio):\n\n```tsx\n<Button variant=\"invalid\">Text</Button>  // ❌ Error de tipo: variante inválida\n<Button>Text</Button>                     // ❌ Error de tipo: falta prop requerido\n```\n\n## 📦 Usar en Otra Aplicación\n\n```bash\nnpm install ./path/to/DealPulseHub\n```\n\n```tsx\nimport { Button, Card, colors } from '@dealpulsehub/design-system';\n```\n\n## 🚀 Próximos Pasos\n\n- [ ] Decidir y ejecutar publicación a npm (`@dealpulsehub/design-system`) — ver `docs/NPM_PUBLISHING.md`\n- [ ] Resolver bug conocido en `demo:phase4` (workflow end-to-end retorna `undefined`)\n- [ ] Decidir si `server-phase4.js` reemplaza a `server.ts` como API oficial\n- [ ] Upgrade mayor de Storybook (7→8+) para cerrar vulnerabilidades restantes (requiere verificación manual del build)\n- [ ] Agregar más componentes (Modal, Dropdown, Alert)\n- [ ] Temas (Light/Dark mode)\n\n## 📝 License\n\nMIT © DealPulseHub\n\n## 📞 Support\n\n- 📧 Email: contact@dealpulsehub.net\n- 🌐 Website: www.dealpulsehub.net\n- 📖 Docs: `docs/` + `.claude/rules/ARCHITECTURE_MAP.md`\n","readmeFilename":"README.md","_rev":"1-81c630d4b322b59efa3470e97cb2ca44"}