EHA Design System

A React component library built for eHealth Africa applications.

Documentation

• Storybook: ehealthafrica.github.io/design-system
• Chromatic: Visual testing and review platform

Installation

npm install eha-design-system

Peer Dependencies

npm install react react-dom

Usage

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

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

Components

The design system includes 25+ components:

• Layout: Accordion, Divider, 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+
• npm v9+

Setup

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

# Install dependencies
npm install

# Start Storybook
npm run storybook

Scripts

| Command | Description | |---------|-------------| | npm run storybook | Start Storybook dev server on port 6006 | | npm run build | Build the library for distribution | | npm run build-storybook | Build static Storybook |

Project Structure

src/
├── components/          # Component library (25+ components)
├── templates/           # Page templates
├── stories/             # Documentation pages
├── theme/               # Design tokens and theme config
├── index.css            # Global styles
└── index.ts             # Main exports

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 (npm run storybook)
5. Commit your changes
6. Push to your branch
7. Open a Pull Request

License

MIT