Layout basierend auf Layout: adaptive B2B-SaaS-Dashboard-Seiten mit Design-Tokens und Komponentenzuständen

Es gibt ein bestehendes B2B-SaaS für Beschaffung und Lagerverwaltung. Das Design wurde in Figma aktualisiert, die Benutzeroberfläche im Produkt basiert jedoch teilweise auf dem alten Layout, teilweise in einem veralteten UI-Kit. Es ist erforderlich, eine Reihe wichtiger persönlicher Kontobildschirme entsprechend dem Layout zu gestalten, damit sie problemlos mit dem aktuellen Frontend verbunden werden können.

Technisches Umfeld und Ausgangsdaten
- Modelle und Prototypen in Figma: Desktop 1440, Tablet 1024, Mobilgerät 375, einschließlich Hover-Focus-Active-Disabled- und Empty-Error-Loading-Zustände
- Aktueller Stack: React 18, Vite, TypeScript, SCSS-Module, Storybook bereits verbunden
- Das Projekt verfügt über grundlegende Komponenten, die jedoch nicht mit dem neuen Design übereinstimmen. Es ist zulässig, neben der alten eine neue Ebene von UI-Komponenten zu erstellen

Arbeitsumfang und Etappen
1) Überprüfung der Layouts und Genehmigung der Karte der Komponentenbildschirme: Markieren Sie wiederverwendete Blöcke, bestimmen Sie Raster, Typografie, Farben, Abstände und Zustände
2) Einrichten von Design-Tokens im Code: CSS-Variablen für Farben, Typografie, Radien, Schatten, Z-Index, Abstandsskala. Unterstützen Sie helle und dunkle Themen im Layout
3) Layout und Integration von 6 Schrankbildschirmen in das Projekt (mit Anbindung an bestehende Routenseiten ohne Änderung der Geschäftslogik):
- Dashboard mit Widgets und adaptiver Rasterumstrukturierung
- Bestelltabelle: Sticky-Header, horizontales Scrollen auf schmalen Bildschirmen, Leerladefehlerzustände
- Bestellseite: zweispaltige Komposition, Blöcke mit Ausblendungen, anpassbar an Mobilgeräte
- Bestellerstellungsformular: mehrstufiges Layout, Feldvalidierungsstatus (visuell), deaktivierte und Hilfstexte
- Benachrichtigungscenter: Gruppierung nach Datum, keine Virtualisierung, aber Gewährleistung eines produktiven Layouts und korrekter Übertragungen
- Profileinstellungen: Abschnitte, Umschalter, Bestätigung von Aktionen (modales Fenster)
4) Komponenten auf UI-Ebene: Schaltfläche, Eingabe, Auswählen (benutzerdefinierter Stil zusätzlich zum nativen Stil), Kontrollkästchen, Umschalten, Abzeichen, Tabs, Modal, Tooltip, Skelett, Toast. Komponenten müssen Zustände aus dem Layout haben und im Storybook gestaltet sein
5) Browserübergreifende Überprüfung und Optimierung: Chrome, Firefox, Safari, Edge. Behebung von Unstimmigkeiten mit Figma

Einschränkungen
- Berühren Sie nicht die API, die Geschäftslogik und die Datentypen. Bei der Aufgabe geht es speziell um Layout, Stile, Layout, Zustände und Verbindung zu aktuellen Seiten
- Verwenden Sie keine umfangreichen UI-Bibliotheken (MUI, AntD und Analoga), sondern nur den vorhandenen Stack und Ihre eigenen Stile
- Das Layout sollte ohne Bezug pixelgenau auf der Ebene von 1-2px sein, jedoch unter Einhaltung des Rasters, der Einrückungen und der Typografie innerhalb der Toleranzen
- Barrierefreiheit: sichtbare Fokuszustände, korrekte Tab-Reihenfolge, Arienbeschriftung für Schaltflächensymbole, Textkontrast mindestens WCAG AA für Fließtext

Spezifisches Ergebnis
- PR im Repository mit vorgefertigtem Layout von 6 Bildschirmen und einer Reihe von UI-Komponenten
- Storybook mit allen Komponenten und deren Zuständen
- Kurze README-Datei: wie man startet, wo man Seiten ansieht, welche Token hinzugefügt wurden

Messbare Akzeptanzkriterien
- Visuelle Übereinstimmung mit Figma an den Kontrollhaltepunkten 1440-1024-768-375 mit einer Randtoleranz von bis zu 4 Pixel und einer Schriftgrößentoleranz von bis zu 1 Pixel
- Kein horizontales Scrollen der Seite bei 375 und 768, außer in der Auftragstabelle, wo es innerhalb des Containers erlaubt ist
- Alle interaktiven Elemente haben den Status „Hover-Focus-Aktiv-Deaktiviert“ wie im Layout
- Lighthouse (Chrome) für jede der neuen Seiten: Barrierefreiheit nicht unter 90, Best Practices nicht unter 90 (ohne Backend)
- Keine kritischen Fehler in der Konsole beim Navigieren durch neue Seiten

Materialien
- Ich werde vor dem Start Zugriff auf Figma und das Repository, eine Liste der Seiten und Links zu Layouts bereitstellen. Während des Prozesses werden 2-3 kurze Anrufe erwartet, um Komponenten und Toleranzen zu synchronisieren.