SARCINĂ: Implementarea pachetelor @gstack/gds-core și @gstack/gds-angular

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

Brief de implementare pentru Claude Code. Sursa de adevăr vizuală: portalul GDS („GDS Portal.dc.html”) și fișierul de tokens pachete/gds-core.css din acest proiect.

Context

GDS este sistemul de design comun pentru produsele GStack (GSSO, GStorage, GRegistry, GLog, Cancelarie, GPortal) și GPay (Core, Hub, Portal Cetățean) — toate aplicații Angular. Scopul: echipele instalează două pachete npm și compun ecrane din componente gata făcute, schimbând doar accentul de culoare și datele de business.

Obiectiv

Monorepo (npm workspaces sau Nx) cu două pachete publicabile:

gds/
├─ packages/
│  ├─ gds-core/          → @gstack/gds-core   (CSS tokens, zero dependențe)
│  └─ gds-angular/       → @gstack/gds-angular (componente Angular standalone)
├─ apps/
│  └─ demo/              → aplicație demo pentru testare vizuală manuală
└─ .npmrc                → @gstack:registry=https://git.esempla.systems/api/v4/projects/govtech%2Fgstack%2Fgstyle/packages/npm/

Livrabil 1 — @gstack/gds-core

Un singur fișier gds-core.css cu variabilele CSS. Conținutul exact există deja: copiază pachete/gds-core.css din acest proiect (neutre slate, accente per produs, semantice, tipografie IBM Plex, spațiere bază 4px, raze, layout, umbre).
package.json: "exports": { "./gds-core.css": "./gds-core.css" }, fără dependențe.
Consumatorul face: @import "@gstack/gds-core/gds-core.css"; apoi suprascrie --gds-accent: var(--gds-accent-<produs>); la nivel de aplicație.

Livrabil 2 — @gstack/gds-angular

Toate componentele: standalone, prefix selector gds-, stiluri DOAR din tokens (var(--gds-*)), niciun hex hardcodat. i18n: toate textele interne (ex. „Niciun rezultat”) prin fișiere i18n/ro.json + i18n/en.json, injectabile printr-un GdsI18nService.

Componentă	API minim
`gds-button`	`variant: primary/secondary/ghost/danger` · `size: md(38px)/sm(30px)` · `icon?` · `disabled`
`gds-badge`	`status: success/warning/danger/info/neutral` · `dot` · `kind: pill/role/mono`
`gds-input`	`label` · `helper?` · `error?` · `required` · ControlValueAccessor · focus ring 3px #dbe4ff
`gds-select`	`label` · `[options]` · ControlValueAccessor
`gds-toggle`	40×22px, buton 18px, activ pe accent · ControlValueAccessor
`gds-sidenav`	`[product]{name,abbr}` · `[groups]` (max 3, un nivel) · `[activeRoute]` · `(navigate)` · contor pe item · bloc utilizator · sub 900px devine drawer cu overlay
`gds-table`	`[columns]` · `[rows]` · `searchable` + `[searchKeys]` (filtrare la tastare) · `[filters]{key,options}` chips cu contor · `expandable="accordion"` cu `ng-template #expanded` (un singur rând expandat, chevron rotit 180°) · `(rowClick)` `(rowExpand)` · empty state · scroll orizontal sub 760px
`gds-drawer`	`[open]` · `(close)` · 380–520px, overlay rgba(15,23,42,.35), închidere ×/Esc/overlay, slot header + footer
`gds-tabs`	`[tabs]` · `(change)` · linie accent 2px
`gds-kpi`	`label` · `value` · `delta?` (verde/roșu) · `icon?`
`gds-alert`	`kind: info/warning`

Plus șabloane-schelet: gds-template-dashboard, gds-template-service-form, gds-template-records (compoziții documentate în portal, secțiunea „Șabloane”).

Specificațiile vizuale exacte (dimensiuni, culori, stări hover/focus) sunt în portalul GDS, pe pagina fiecărei componente — respectă-le la pixel.

Testare (obligatoriu înainte de publicare)

Unit — Jest + Testing Library pentru fiecare componentă: randare, stări (disabled, error, expanded, open), evenimente emise, ControlValueAccessor. Țintă: toate API-urile din tabelul de mai sus acoperite.
Vizual/manual — apps/demo: câte o pagină per componentă cu toate stările
- un ecran „Listă plăți” care combină sidenav + table (căutare, filtre, acordeon)
- drawer cu tab-uri. npm run demo trebuie să pornească fără erori în consolă.
A11y — axe-core pe paginile demo: zero violări serious/critical. Focus vizibil, aria-expanded pe rândurile acordeon, Esc închide drawer-ul.
Pachet — npm pack pe ambele pachete; instalează tarball-urile într-o aplicație Angular nouă (ng new sandbox) și verifică: importul CSS funcționează, un gds-button și un gds-table randează corect, tree-shaking (build-ul nu include componente neimportate).

Publicare

CI (GitLab CI): la tag v* → build → teste → npm publish pe git.esempla.systems/govtech/gstack/gstyle/-/packages (GitLab Package Registry).
Dist-tags: latest doar din tag-uri stabile; next din branch-ul de release.
Versionare semver: MAJOR = tokens redenumite/API incompatibil · MINOR = componente noi · PATCH = corecții. Ambele pachete versionate în lockstep.

Criterii de acceptare

npm install @gstack/gds-core @gstack/gds-angular + 5 linii de setup → un ecran funcțional
Schimbarea --gds-accent recolorează butoane primare, nav activ, tab-uri, fără alt cod
Toate componentele din tabel implementate cu API-ul specificat, teste verzi
Demo app completă, zero erori consolă, zero violări axe serious+
README per pachet + CHANGELOG generat din commit-uri convenționale