Barmer Puls Design System

Barmer Puls is a cross-platform design system and component library built to power Barmer's digital products. The system provides a unified set of React and React Native components ensuring consistent user experiences across web and mobile applications for one of Germany's largest health insurance providers.

Project Overview

As a contributor to the Barmer Puls design system, I worked on core UI components used across multiple Barmer applications. The system is structured as a monorepo with separate packages for components, hooks, themes, icons, and utilities, enabling shared code between React web and React Native mobile implementations.

Key Contributions

Core Components

Enhanced and maintained foundational components including TextInput, Menu, ListItemButton, and PhoneInput. Implemented features like scrollable menus with dynamic positioning, proper dark mode support, and cross-platform layout fixes for Android-specific issues.

Dark Mode Support

Fixed on-the-fly switching between light and dark modes, ensuring smooth theme transitions without requiring app restarts. This involved updating style systems to respond dynamically to theme changes across all components.

Input Components

Improved TextInput component with proper label width calculations, border handling for different states, and support for placing inputs on various background colors. Enhanced PhoneInput to gracefully handle unknown dial codes.

Menu System

Implemented scrollable menus with automatic position recalculation when windows are resized or zoomed. This ensures menus remain properly positioned and usable across different viewport sizes and zoom levels.

Developer Experience

Set up Docker configuration to run the documentation website and Storybook side by side for development. Added package version display in the Storybook toolbar for easier version tracking during development and QA.

Ref Management

Refactored internal ref handling across components using a new mergeRefs utility function, improving code consistency and reducing bugs related to ref forwarding.