Package Exports

emr-web-ui-components
emr-web-ui-components/package.json
emr-web-ui-components/styles

Readme

@qkit-emr-monorepo/web-ui

A comprehensive UI component library for EMR (Electronic Medical Records) applications, built on top of shadcn/ui with medical-specific enhancements.

🚀 Features

shadcn/ui Foundation: Based on the popular shadcn/ui component library
Medical-Specific Components: Enhanced components for healthcare applications
Atomic Design: Organized component architecture with Atoms, Molecules, and Organisms
TypeScript Support: Full TypeScript support with comprehensive type definitions
Accessibility: WCAG 2.1 AA compliant components
Performance Optimized: Tree-shaking, lazy loading, and bundle optimization
Theme Support: Light/dark mode and medical theme variants
Responsive Design: Mobile-first responsive components

📦 Installation

npm install @qkit-emr-monorepo/web-ui
# or
yarn add @qkit-emr-monorepo/web-ui
# or
pnpm add @qkit-emr-monorepo/web-ui

🔧 Setup

1. Install Dependencies

This library requires the following peer dependencies:

npm install react react-dom
npm install tailwindcss @tailwindcss/forms @tailwindcss/typography
npm install class-variance-authority clsx tailwind-merge
npm install lucide-react

2. Configure Tailwind CSS

Add the library's styles to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@qkit-emr-monorepo/web-ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // Your theme extensions
    },
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
  ],
}

3. Import Styles

Import the library's CSS in your main CSS file:

@import '@qkit-emr-monorepo/web-ui/dist/styles.css';

🎯 Usage

Basic Components

import { Button, Input, Label, Card } from '@qkit-emr-monorepo/web-ui';

function MyComponent() {
  return (
    <Card>
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="Enter your email" />
      <Button>Submit</Button>
    </Card>
  );
}

Medical-Specific Atoms

import { Atoms } from '@qkit-emr-monorepo/web-ui';

function MedicalForm() {
  return (
    <div>
      <Atoms.Button 
        variant="medical-primary" 
        priority="high"
        medical
      >
        Emergency Alert
      </Atoms.Button>
      
      <Atoms.Input 
        validationState="valid"
        medical
        category="medical"
      />
      
      <Atoms.Icon 
        name="Heart" 
        library="medical"
        priority="high"
        specialty="cardiology"
      />
    </div>
  );
}

Theme Provider

import { UIProvider, useTheme } from '@qkit-emr-monorepo/web-ui';

function App() {
  return (
    <UIProvider>
      <MyApp />
    </UIProvider>
  );
}

function MyApp() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <div>
      <button onClick={toggleTheme}>
        Current theme: {theme}
      </button>
    </div>
  );
}

🏗️ Component Architecture

UI Components (shadcn/ui based)

Basic Components: Button, Input, Label, Card, etc.
Form Components: Form, Select, Checkbox, Radio, etc.
Layout Components: Dialog, Sheet, Drawer, etc.
Data Display: Table, Chart, Calendar, etc.
Navigation: Breadcrumb, Pagination, Tabs, etc.

Atoms (EMR-specific)

Button Atom: Enhanced with medical variants and priorities
Input Atom: Medical validation, masks, and autocomplete
Label Atom: Medical-specific styling and accessibility
Icon Atom: Medical icons, priorities, and specialties

Utilities

cn: Class name utility for conditional styling
cva: Class Variance Authority for component variants
Hooks: useTheme, useMediaQuery, useLocalStorage, etc.

🎨 Theming

Medical Theme Variants

// Medical-specific variants
<Button variant="medical-primary">Primary Medical</Button>
<Button variant="medical-secondary">Secondary Medical</Button>
<Button variant="medical-success">Success</Button>
<Button variant="medical-warning">Warning</Button>
<Button variant="medical-error">Error</Button>
<Button variant="medical-critical">Critical</Button>

Priority Levels

// Priority-based styling
<Icon priority="high" />     // Red - Critical
<Icon priority="medium" />   // Yellow - Warning  
<Icon priority="low" />      // Green - Normal

Medical Specialties

// Specialty-specific colors
<Icon specialty="cardiology" />    // Red
<Icon specialty="neurology" />     // Purple
<Icon specialty="oncology" />      // Orange
<Icon specialty="pediatrics" />    // Pink
<Icon specialty="emergency" />     // Dark Red
<Icon specialty="surgery" />       // Gray

🔧 Advanced Usage

Custom Validation

import { Input } from '@qkit-emr-monorepo/web-ui';

<Input
  validationState="invalid"
  validationMessage="Invalid medical record number"
  validationRules={[
    { type: 'pattern', value: /^MR\d{8}$/, message: 'Must be MR followed by 8 digits' }
  ]}
/>

Icon Libraries

import { Icon } from '@qkit-emr-monorepo/web-ui';

// Lucide React icons
<Icon name="Heart" library="lucide" />

// Medical icons
<Icon name="Stethoscope" library="medical" />

// Heroicons (fallback)
<Icon name="User" library="heroicons" />

Performance Optimization

import { LazyComponent, VirtualList } from '@qkit-emr-monorepo/web-ui';

// Lazy loading
<LazyComponent fallback={<Spinner />}>
  <HeavyComponent />
</LazyComponent>

// Virtual scrolling
<VirtualList
  items={largeDataset}
  itemHeight={50}
  renderItem={(item) => <ListItem item={item} />}
/>

📚 API Reference

Button Atom

interface ButtonAtomProps {
  variant?: 'default' | 'medical-primary' | 'medical-secondary' | 'medical-success' | 'medical-warning' | 'medical-error' | 'medical-critical';
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  priority?: 'high' | 'medium' | 'low';
  medical?: boolean;
  loading?: boolean;
  disabled?: boolean;
  // ... other props
}

Input Atom

interface InputAtomProps {
  validationState?: 'valid' | 'invalid' | 'warning';
  validationMessage?: string;
  mask?: string | RegExp[];
  autocomplete?: boolean;
  medical?: boolean;
  category?: 'general' | 'medical' | 'navigation' | 'action' | 'status' | 'communication';
  // ... other props
}

Icon Atom

interface IconAtomProps {
  name: string;
  library?: 'lucide' | 'heroicons' | 'medical' | 'custom';
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
  priority?: 'high' | 'medium' | 'low';
  specialty?: 'cardiology' | 'neurology' | 'oncology' | 'pediatrics' | 'emergency' | 'surgery';
  // ... other props
}

🧪 Testing

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests in watch mode
npm run test:watch

📦 Building

# Development build
npm run build

# Production build
npm run build:prod

# Watch mode
npm run build:watch

🤝 Contributing

Fork the repository
Create a feature branch
Make your changes
Add tests
Submit a pull request

📄 License

MIT License - see LICENSE file for details

🆘 Support

For support and questions:

Create an issue in the repository
Check the documentation
Review the Storybook examples

shadcn/ui - Base component library
Tailwind CSS - Utility-first CSS framework
Radix UI - Unstyled, accessible UI primitives
Lucide React - Beautiful & consistent icon toolkit

emr-web-ui-components