EHA Design System

A React component library built for eHealth Africa applications.

Documentation

• Storybook: ehealthafrica.github.io/design-system

Installation

pnpm install eha-design-system

Peer Dependencies

pnpm add react react-dom

Usage

import { Button, Modal, ThemeProvider } from 'eha-design-system';

function App() {
  return (
    <ThemeProvider brand="eha">
      <Button variant="primary">Click me</Button>
    </ThemeProvider>
  );
}

Multibrand Theming

The design system supports multiple product brands, each with its own color identity. Themes are applied via CSS custom properties (--ds-*) injected at runtime, so switching brands requires no rebuild.

Supported Brands

| Brand ID | Product | |----------|----------------------| | "eha" | eHealth Africa (default) | | "lomis"| LoMIS | | "planfeld"| PlanFeld | | "reach"| Reach Data Portal |

Using ThemeProvider

Wrap your application root and pass the brand prop:

import { ThemeProvider } from 'eha-design-system';

<ThemeProvider brand="reach">
  <App />
</ThemeProvider>

Passing a different brand prop at runtime will re-apply all CSS variables automatically — no page reload needed.

Static CSS Import (alternative)

If you prefer to avoid ThemeProvider, import a pre-generated brand CSS file at your app entry point:

// main.tsx
import 'eha-design-system/styles/brands/reach.css';

This sets --ds-* variables on :root but does not support runtime brand switching.

Using Brand Tokens in Your Own CSS

All components reference --ds-* CSS variables, which you can use in your own styles too:

.my-element {
  background-color: var(--ds-color-primary-40);
  color: var(--ds-text-primary);
  border-color: var(--ds-border-default);
}

Theme Exports

| Export | Description | |-------------------------------|----------------------------------------------------------| | ThemeProvider | React component — wraps app to apply brand theme | | applyRSuiteTheme(brand) | Imperatively apply a brand's CSS variables to the DOM | | generateBrandCSSVariables() | Convert brand token set to a flat --ds-* variable map | | brands | Registry of all brand token sets | | BrandId | TypeScript union type: 'eha' \| 'lomis' \| 'planfeld' \| 'reach' | | designTokens | Full token object (colors, spacing, typography, etc.) |

Components

The design system includes 23 components:

• Layout: Accordion, Modal, Drawer, Tabs, Steps
• Navigation: Breadcrumb, Dropdown, Sidenav, PageHeader
• Forms: Button, Checkbox, Input, DatePicker, SelectPicker, Radio
• Data Display: Table, Avatar, Badge, Tag, Progress, Loader
• Feedback: Notification, MetricCard

Development

Prerequisites

• Node.js v18+
• pnpm v10+

Setup

# Clone the repository
git clone https://github.com/eHealthAfrica/design-system.git
cd design-system

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

Scripts

| Command | Description | |--------------------------|------------------------------------------| | pnpm storybook | Start Storybook dev server on port 6006 | | pnpm build | Build the library for distribution | | pnpm build-storybook | Build static Storybook | | pnpm lint | Run Biome CI checks | | pnpm lint:fix | Auto-fix lint and formatting issues | | pnpm export-tokens | Export tokens from Figma | | pnpm generate-brand-css| Regenerate styles/brands/*.css files | | pnpm vitest | Run unit tests |

Project Structure

src/
├── components/          # 23 components
├── templates/           # Page templates
├── stories/             # Documentation pages
├── theme/               # Design tokens, brand definitions, RSuite theme bridge
│   └── tokens/
│       └── brands/      # Per-brand token files (eha, lomis, planfeld, reach)
├── index.css            # Global styles
└── index.ts             # Main exports
scripts/
├── generate-brand-css.js  # Generates styles/brands/*.css from brand tokens
└── export-figma-tokens.js # Exports tokens from Figma
styles/
└── brands/              # Pre-generated brand CSS files (eha, lomis, planfeld, reach)

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/new-component)
3. Make your changes
4. Run Storybook to test (pnpm storybook)
5. Commit your changes
6. Push to your branch
7. Open a Pull Request

License

MIT