Barmer Puls Design System

Barmer Puls ist ein Cross-Platform Design System und eine Komponentenbibliothek für Barmers digitale Produkte. Das System liefert einheitliche React- und React Native Komponenten für konsistente User Experiences über Web und Mobile bei einer der größten Krankenkassen Deutschlands.

Projektüberblick

Als Contributor am Barmer Puls Design System habe ich an zentralen UI Komponenten gearbeitet, die in mehreren Barmer Anwendungen genutzt werden. Das System ist als Monorepo aufgebaut, mit separaten Packages für Komponenten, Hooks, Themes, Icons und Utilities, wodurch Code zwischen React Web und React Native geteilt wird.

Wichtige Beiträge

Core Components

Basis-Komponenten wie TextInput, Menu, ListItemButton und PhoneInput verbessert und gewartet. Features wie scrollbare Menüs mit dynamischer Positionierung, Dark Mode Support und Cross-Platform Layout Fixes für Android umgesetzt.

Dark Mode Support

On-the-fly Switching zwischen Light und Dark Mode behoben, sodass Theme-Transitions ohne App-Neustart funktionieren. Styles wurden so angepasst, dass sie dynamisch auf Theme-Änderungen reagieren.

Input Components

TextInput verbessert mit korrekter Label-Breite, Border Handling je State und Support für Inputs auf verschiedenen Backgrounds. PhoneInput erweitert, um unbekannte Dial Codes sauber zu behandeln.

Menu System

Scrollbare Menüs mit automatischer Positions-Neuberechnung bei Resize oder Zoom implementiert. So bleiben Menüs korrekt positioniert und nutzbar über verschiedene Viewport-Größen hinweg.

Developer Experience

Docker-Konfiguration aufgebaut, um Dokumentationsseite und Storybook parallel laufen zu lassen. Paket-Versionen in der Storybook Toolbar angezeigt, um Version Tracking in Entwicklung und QA zu erleichtern.

Ref Management

Internes Ref Handling über Komponenten hinweg refactored und eine neue mergeRefs Utility eingeführt. Das verbessert Code-Konsistenz und reduziert Bugs beim Ref Forwarding.