@rxbenefits/ui

Comprehensive UI component library for RxBenefits applications built on Ant Design v4

Overview

@rxbenefits/ui is a comprehensive React component library that provides a consistent design system for RxBenefits healthcare benefits management applications. Built on top of Ant Design v4, it includes 47+ customized and specialized components, design tokens, and interactive Storybook documentation.

Features

• ✨ 47+ React Components - Complete UI component library
• 🎨 Design System - Consistent theme tokens and styling
• 📚 Storybook Documentation - Interactive component playground
• ♿ Accessible - WCAG 2.1 compliant components
• 🔧 TypeScript - Full type safety with strict mode
• 🧪 Well Tested - Comprehensive test coverage
• 📦 Tree-shakeable - Optimized bundle sizes
• 🎯 Healthcare Focused - Specialized components for pharmacy benefits

Installation

npm install @rxbenefits/ui

Peer Dependencies

This library requires the following peer dependencies:

npm install react@^18.0.0 react-dom@^18.0.0 antd@^4.18.0 @rxbenefits/types@^1.0.0 @rxbenefits/constants@^1.0.0 @rxbenefits/icons@^1.0.0 @rxbenefits/styles@^1.0.0

Quick Start

import { Button, Input, Form, Table } from '@rxbenefits/ui';
import '@rxbenefits/styles'; // Import global styles

function App() {
  return (
    <div>
      <Button type="primary">Click Me</Button>
      <Input placeholder="Enter text" />
    </div>
  );
}

Components

Form Components

• Button - Primary, secondary, danger, and split buttons
• Input - Text input with various styles
• InputNumber - Numeric input with formatting
• InputPhone - Phone number input with masking
• InputSSN - SSN input with security
• InputZip - ZIP code input with validation
• Select - Dropdown selection with options
• Checkbox - Single and grouped checkboxes
• Radio - Radio button groups
• Switch - Toggle switches
• DatePicker - Date and date range pickers
• Form - Form wrapper with validation
• FormField - Individual form fields
• FormFieldGroup - Grouped form fields

Data Display

• Table - Advanced data tables with sorting, filtering, search
• List - Simple, infinite scroll, and paginated lists
• Card - Content cards
• Collapse - Collapsible sections
• Tabs - Tabbed interfaces
• Tag - Labels and tags
• Avatar - User avatars
• Empty - Empty state display
• Skeleton - Loading placeholders

Feedback

• Alert - Alert messages
• Modal - Dialog boxes
• Drawer - Side panels
• Notification - Toast notifications
• Loading - Loading indicators
• Result - Result pages

Navigation

• Menu - Navigation menus
• Navigation - App navigation
• PageHeader - Page headers
• Steps - Step-by-step navigation
• Affix - Fixed positioning

Layout

• Grid - Row and column layout
• Space - Spacing utilities
• Divider - Content dividers
• Layout - App and content layouts

Specialized Components

• LoginForm - Authentication forms
• Transfer - Transfer lists
• Upload - File upload components

Note: The DataMapper component has been removed from this library due to circular dependencies with @optimize/api. It will be available in a separate @rxbenefits/data-management package.

Typography

import { Typography } from '@rxbenefits/ui';

const { Title, Text } = Typography;

<Title level={1}>Heading</Title>
<Text>Body text</Text>

Theme

Access design tokens:

import { theme } from '@rxbenefits/ui';

const primaryColor = theme.tokens.colors.primary;

Storybook

View interactive component documentation:

npm run storybook

Visit https://rxbenefits.github.io/rxbenefits-ui for online docs.

Development

# Install dependencies
npm install

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

# Lint code
npm run lint

# Format code
npm run format

# Type check
npm run typecheck

# Build library
npm run build

# Run Storybook
npm run storybook

# Build Storybook
npm run build-storybook

Browser Support

• Chrome (latest 2 versions)
• Firefox (latest 2 versions)
• Safari (latest 2 versions)
• Edge (latest 2 versions)
• IE 11 (with polyfills)

Migration from Monorepo

If migrating from the RxBenefits Optimize.UI monorepo:

Before (Monorepo)

import { Button } from '@rxbenefits/ui'; // Local package

After (npm Package)

import { Button } from '@rxbenefits/ui'; // npm package

The import path remains the same! Simply install the package and update your package.json.

What's Not Included

Data Mapper Component: The data-mapper component has been excluded from this package due to circular dependencies with @optimize/api. If you need data mapping functionality, it remains available in the monorepo or will be published as a separate package.

Breaking Changes in v1.0.0

• Removed: data-mapper component (circular dependency with @optimize/api)
• Removed: form-wrapper component (had @optimize dependencies)
• Updated: All components now use strict TypeScript mode
• Updated: React 18.3+ required (was React 17)
• Updated: Storybook 7.6+ for component documentation

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

License

MIT © RxBenefits

Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 📖 Docs: Storybook

Related Packages

• @rxbenefits/types - TypeScript type definitions
• @rxbenefits/constants - Application constants
• @rxbenefits/icons - Icon library
• @rxbenefits/styles - Global styles and themes