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
• 🔒 Private, internal package for RSSB use only

🏗️ 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 private npm registry
2. Set up your npm configuration with the appropriate credentials

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

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

For Library Developers

# Clone the repository from RSSB's internal GitLab
git clone https://gitlab.rssb.rw/frontend/ui-components.git

# Navigate to the project directory
cd ui-components

# Install dependencies
yarn install

📦 Usage in RSSB Applications

import { Button } from "@rssb/ui-components";

function LoginForm() {
  return (
    <Button variant="primary" 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

📁 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

🔐 Security

This is a private package containing RSSB-specific implementations. Do not share or distribute this code outside of RSSB.

🔄 Version Control & Updates

We use semantic versioning for releases.

👥 Team

• RSSB Front-ent Team

📋 Changelog

See CHANGELOG.md for a list of changes and updates.

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