npm package: @rssb/ui
Description: RSSB shared React UI library
Latest version: 2.0.1

# RSSB UI Component Library

An internal, TypeScript-based React component library for the Rwanda Social Security Board (RSSB) organization. Built with modern tools and atomic design principles to ensure consistency across all RSSB digital products.

## 🌟 Overview

This private component library serves as the foundation for all RSSB web applications, ensuring a consistent user experience and accelerating development across teams.

### Key Features

- 🏢 Official RSSB design system implementation
- 📦 Built with TypeScript for enhanced reliability
- ⚡️ Powered by Vite and SWC for optimal performance
- 📚 Comprehensive Storybook documentation
- 🎨 Structured using atomic design principles

## 🏗️ Component Structure

Following atomic design principles for scalable architecture:

```
src/
└── components/
    ├── atoms/        # Basic RSSB UI elements (Button, Input, etc.)
    ├── molecules/    # Simple component combinations
    ├── organisms/    # Complex RSSB-specific UI components
    ├── templates/    # RSSB application layout templates
    └── pages/        # Complete page implementations
```

## 🚀 Getting Started

### For RSSB Developers

1. Ensure you have access to the RSSB npm registry
2. Set up your npm configuration with the appropriate credentials

```bash
# Authenticate with the RSSB registry
npm login --registry=https://rssb-registry.com

# Install the library in your project
yarn add @rssb/ui
```

### For Library Developers

```bash
# Clone the repository from RSSB's internal GitLab
git clone https://github.com/Rwanda-Social-Security-Board/rssb-ui.git

# Navigate to the project directory
cd @rssb/ui

# Install dependencies
yarn install
```

## 📦 Usage in RSSB Applications

```tsx
import { Button } from "@rssb/ui/button";

function LoginForm() {
  return (
    <Button variant="outline" onClick={() => console.log("Logged in")}>
      Login
    </Button>
  );
}
```

## 🛠️ Available Scripts

- `yarn dev` - Starts Storybook for component development
- `yarn build` - Builds the library for production
- `yarn test` - Runs the test suite
- `yarn lint` - Runs ESLint for code quality
- `yarn chromatic` - Builds the changes and creates a static build for storybook

## 📁 Project Structure

```
rssb-ui/
├── .storybook/          # Storybook configuration
├── src/
│   ├── components/      # RSSB React components
│   ├── utils/           # Utility functions
│   └── index.ts         # Main entry point
├── stories/             # Storybook stories
├── tests/               # Test files
└── [Config files...]    # Various configuration files
```

## 📚 Documentation

Internal documentation is available through Storybook and our internal developer portal:

1. **Storybook** (for component exploration):

   - Local: Start with `yarn storybook` and visit `http://localhost:6006`

2. **Developer Portal**:
   - Comming soon!

## 🤝 Contributing

As an internal RSSB project, contributions are welcome from all RSSB team members:

1. Create a new branch from `develop`
2. Make your changes following our coding standards
3. Update tests and documentation
4. Submit a merge request to `develop`

<!-- See our [internal contribution guide](https://gitlab.rssb.rw/frontend/ui-components/-/blob/main/CONTRIBUTING.md) for detailed information. -->

## 🔄 Version Control & Updates

We use semantic versioning for releases.

## 👥 Team

- RSSB Front-ent Team

## 📋 Changelog

See [CHANGELOG.md](CHANGELOG.md) for a list of changes and updates.

---

Copyright © 2024 Rwanda Social Security Board (RSSB). All rights reserved.