GDS — GovStack Design System & Constructor

Acest conținut nu este încă disponibil în limba selectată.

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/`)

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.
Proiect Angular (gds-mockup-project.zip, JSZip) — self-contained, ng build verde din prima (look-ul GDS inline; fără pachete private nepublicate).
.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.