GDS — GovStack Design System & Constructor

Monorepo Angular 20 pentru GovStack Design System (GDS) al Esempla Systems și aplicația Constructor de proiectare mockup-uri cu date reale/fake.

Pachete

Registru canonic: GitLab Package Registry pentru @gstack/* (npm). Flutter gds_flutter → git pe același repo/tag (nu pub.dev).

Catalog componente (oameni + agenți): docs/components/README.md · AGENTS.md

Proiect	Nume npm / pub	Rol
projects/gds-core	@gstack/gds-core	Token-uri (4 accente, IBM Plex, paletă slate), contracte de date ale blocurilor, CSS-ul design-system-ului (GDS_CSS) și rendereri statici pentru export
projects/gds-angular	@gstack/gds-angular	Componentele reale gds-* (sidenav, kpi-row, bar/line/donut chart, table, form, alert, activity, block, shell)
projects/gds_flutter	gds_flutter	Flutter: theme + widget-uri GDS (GdsHeader, GdsBottomMenu, …) pentru app-ul mobil; preview în Constructor (paleta Flutter)
projects/constructor	—	Aplicația Constructor: paletă → canvas 1:1 → inspector, faker seedabil, export
design/	—	Sursa de design: portalul GDS, ghidul, contractul pachetelor (gds-core.css) și designurile de referință .dc.html pentru GStack + GPay (vezi design/README.md)

O singură sursă de adevăr vizuală. Componentele gds-angular și rendererele statice din gds-core/render.ts folosesc EXACT aceleași clase din GDS_CSS, iar helper-ele de prezentare (status, delta, înălțimi bare, inițiale) sunt partajate. Astfel canvas-ul live și fișierul HTML exportat arată identic.

Constructorul

• Paletă (stânga): tipuri de blocuri + meniul lateral (fără plafon practic pe numărul de blocuri).
• Canvas (centru): preview 1:1 cu componentele reale; blocul selectat are contur accent + toolbar (↑ ↓ duplică șterge).
• Inspector (dreapta): formular de editare per tip de bloc + butoanele Fake (completează câmpurile goale) și Regen (rescrie tot).
• Header: titlu editabil, selector de accent (4 accente), comutator RO/EN (regenerează textele fake în limba aleasă), Undo/Redo (Ctrl+Z / Ctrl+Shift+Z, istoric ≤120 pași), Nou, Import, Export.
• Documentul se salvează automat în localStorage la fiecare modificare.
• Responsive: sub 1100px inspectorul devine drawer; sub 900px paleta devine bară jos.

Generatorul fake (src/app/faker/)

• Fără dependențe externe. Liste RO/EN proprii (~30 servicii publice, ~30 nume, formate MDL / IDNO / IDNP / coduri MD-2026-XXXXX / date).
• Seedabil (PRNG mulberry32): meta.seed reproduce exact același mockup.

Export (src/app/export/)

1. HTML standalone (gds-mockup.html) — un singur fișier, token-uri GDS inline, fonturi IBM Plex din Google Fonts, se deschide din file://. Fără JS de framework.
2. Proiect Angular (gds-mockup-project.zip, JSZip) — self-contained, ng build verde din prima (look-ul GDS inline; fără pachete private nepublicate).
3. .gdsmock.json — documentul brut, reimportabil prin buton sau drag & drop.

Comenzi

nvm use                   # Node 20 (.nvmrc) — CI și imaginile Docker folosesc node:20
npm install               # instalează și hook-urile husky (prepare)
npm start                 # ng serve constructor :4200 + API AI :4202 (tools/api-server.mjs)
npm run build             # build de producție al aplicației Constructor
npm run build:libs        # build @gstack/gds-core + gds-angular (ng-packagr)

npm run lint              # ESLint (angular-eslint) pe gds-core / gds-angular / constructor
npm run lint:tools        # ESLint pe tools/, agent/, e2e/
npm run format            # Prettier pe tot repo-ul (format:check în CI)

npm run test:all          # Karma (core + ui + app, ChromeHeadless) + node:test (tools/, agent/)
npm run e2e               # Playwright (folosește Chrome instalat, pornește singur :4300)
npm run gate              # lint + build + test:all + e2e — poarta verde completă

Calitate cod (standard de proiect)

Ce	Cum
Lint	eslint.config.js (flat config, angular-eslint 20, templateAccessibility) — 0 erori; regulile de tastatură/focus pe suprafețe click-only sunt warn (datorie a11y urmărită)
Format	Prettier (config în package.json, printWidth 100, singleQuote), .prettierignore
Hook-uri	husky: pre-commit → lint-staged (eslint —fix + prettier pe fișierele staged); commit-msg → commitlint (Conventional Commits: feat(table): …, fix(css): …)
Teste	Karma/Jasmine pentru Angular (*.spec.ts), node --test pentru tools/*.test.mjs și agent/test/*.test.mjs, Playwright pentru E2E
CI	.gitlab-ci.yml: lint → build (libs, app, Flutter) → test (Karma + node:test) → publish pe tag v*
Jurnal	CHANGELOG.md (Keep a Changelog) + projects/gds_flutter/CHANGELOG.md

Consumatori (în afara monorepo-ului)

# .npmrc — scope @gstack → GitLab Package Registry
@gstack:registry=https://git.esempla.systems/api/v4/projects/govtech%2Fgstack%2Fgstyle/packages/npm/
//git.esempla.systems/api/v4/projects/govtech%2Fgstack%2Fgstyle/packages/npm/:_authToken=${NPM_TOKEN}

npm install @gstack/gds-core @gstack/gds-angular

Publicare: tag v* → CI publică @gstack/* pe npm registry; Flutter se trage din același tag git (pubspec → ref: vX.Y.Z, niciodată pub.dev). Înainte de tag: node tools/stamp-release-version.mjs X.Y.Z.

Testele rulează headless cu Chrome (karma.conf.js → ChromeHeadlessNoSandbox; în CI CHROME_BIN=/usr/bin/chromium). Sub Karma, projects/constructor/src/test-setup.ts răspunde 503 la /api/*, deci Constructor rămâne localStorage-only fără zgomot în log. E2E folosește channel: 'chrome' (fără download de browser) și nu rulează în CI.

Verificat (Definition of Done)

• ✅ npm run gate verde: lint 0 erori, 646 teste Karma (184 core + 247 ui + 215 app), 306 teste node:test (tools + agent), 4 E2E Playwright.
• ✅ Proiectul Angular exportat: dezarhivare → npm install → ng build verde.
• ✅ Toate cele 7 criterii de acceptare din brief (vezi test-scenarios.md).

Note de arhitectură

• docs/adr/ADR-GDS-001-design-system-monorepo.md
• docs/adr/ADR-GDS-002-export-selfcontained.md
• test-scenarios.md — trasabilitate criterii ↔ teste.