Aspect bazat pe aspect: pagini de bord adaptive B2B SaaS cu simboluri de design și stări ale componentelor

Există un SaaS B2B existent pentru achiziții și managementul depozitelor. Designul a fost actualizat în Figma, dar interfața din produs se bazează parțial pe aspectul vechi, parțial într-un kit UI învechit. Este necesar să configurați un set de ecrane cheie ale contului personal în conformitate cu aspectul, astfel încât acestea să poată fi conectate fără durere la interfața actuală.

Mediul tehnic și datele inițiale
- Modele și prototipuri în Figma: desktop 1440, tabletă 1024, mobil 375, inclusiv stări de încărcare cu eroare goală
- Stiva actuală: React 18, Vite, TypeScript, module SCSS, Storybook deja conectat
- Proiectul are componente de bază, dar acestea nu coincid cu noul design - este permisă crearea unui nou strat de componente UI lângă cel vechi

Domeniul de lucru și etapele
1) Auditul machetelor și aprobarea hărții ecranelor componente: evidențierea blocurilor reutilizate, determinarea grilei, tipografie, culori, spațiere, stări
2) Configurarea jetoanelor de design în cod: variabile CSS pentru culori, tipografie, raze, umbre, z-index, scară de spațiere. Acceptați tema deschisă și întunecată din aspect
3) Dispunerea și integrarea a 6 ecrane de cabinet în proiect (cu conexiune la paginile de rută existente fără a schimba logica de afaceri):
- Tabloul de bord cu widget-uri și restructurare adaptivă a rețelei
- Tabel de comandă: antet lipicios, defilare orizontală pe ecrane înguste, stări de eroare de încărcare goală
- Pagina de comandă: compoziție pe două coloane, blocuri cu colapsuri, adaptabile la mobil
- Formular de creare a comenzii: aspect în mai mulți pași, stări de validare a câmpului (vizual), texte dezactivate și de ajutor
- Centru de notificare: gruparea după date, nu faceți virtualizare, dar asigurați aspectul productiv și transferurile corecte
- Setări profil: secțiuni, comută, confirmare acțiuni (fereastra modală)
4) Componente la nivel de interfață de utilizare: Buton, Intrare, Selectare (stil personalizat în partea de sus a nativului), Casetă de selectare, Comutare, Insigna, File, Modal, Indicator, Skeleton, Toast. Componentele trebuie să aibă stări din aspect și să fie stilate în Storybook
5) Verificare și lustruire între browsere: Chrome, Firefox, Safari, Edge. Remedierea discrepanțelor cu Figma

Restricții
- Nu atingeți API-ul, logica de afaceri și tipurile de date - sarcina este în special despre aspect, stiluri, aspect, stări și conexiunea la paginile curente
- Nu utilizați biblioteci grele de UI (MUI, AntD și analogi) - doar stiva existentă și propriile stiluri
- Aspectul ar trebui să fie fără referire la pixel-perfect la nivelul de 1-2px, dar în conformitate cu grila, indentări și tipografie în limitele toleranțelor
- Accesibilitate: stări vizibile de focalizare, ordinea corectă a tabulatorilor, etichetă arie pentru pictogramele butoanelor, contrast text cel puțin WCAG AA pentru textul corpului

Rezultat specific
- PR în depozit cu aspect gata făcut de 6 ecrane și un set de componente UI
- Carte de povești cu toate componentele și stările acestora
- Scurtă README: cum se lansează, unde să se uite la pagini, ce jetoane au fost adăugate

Criterii de acceptare măsurabile
- Conformitate vizuală cu Figma pe punctele de întrerupere de control 1440-1024-768-375 cu o toleranță la margine de până la 4px și toleranță la dimensiunea fontului de până la 1px
- Fără derulare orizontală a paginii la 375 și 768, cu excepția tabelului de comenzi, unde este permisă în interiorul containerului
- Toate elementele interactive au stări hover-focus-activ-dezactivate ca în aspect
- Lighthouse (Chrome) pentru oricare dintre noile pagini: accesibilitate nu mai mică de 90, Cele mai bune practici nu mai mici de 90 (excluzând backend-ul)
- Fără erori critice în consolă la navigarea în pagini noi

Materiale
- Voi oferi acces la Figma și depozit, o listă de pagini și link-uri către machete înainte de începere. În timpul procesului, sunt așteptate 2-3 apeluri scurte pentru a sincroniza componentele și toleranțele.