@archerlab/ui

Shared UI component library for ArcherLab EMR portals.

Installation

npm install @archerlab/ui

Usage

Import Components

import { Button, Card, Input } from "@archerlab/ui/components/ui";
import { PageHeader } from "@archerlab/ui/components/layout";
import { StatCard } from "@archerlab/ui/components/shared";
import { cn, formatDate } from "@archerlab/ui/lib";

Configure Tailwind

In your portal's tailwind.config.ts:

import { archerLabPreset } from "@archerlab/ui/tailwind";

export default {
  presets: [archerLabPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@archerlab/ui/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [require("tailwindcss-animate")],
};

Import Global Styles

In your portal's root layout:

import "@archerlab/ui/globals.css";

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev

Package Structure

src/
├── components/
│   ├── ui/          # Base UI components (shadcn-style)
│   ├── layout/      # Layout components (PageHeader, etc.)
│   └── shared/      # Shared business components (StatCard, etc.)
├── lib/
│   └── utils.ts     # Utility functions (cn, formatDate, etc.)
├── types/
│   └── index.ts     # Shared TypeScript types
├── tailwind.config.ts  # Tailwind preset
├── globals.css      # Global styles with CSS variables
└── index.ts         # Main exports

Components

UI Components

• Avatar
• Badge
• Button
• Calendar
• Card
• Checkbox
• Dialog
• Dropdown Menu
• Input
• Label
• Popover
• Progress
• Radio Group
• Scroll Area
• Select
• Separator
• Skeleton
• Switch
• Table
• Tabs
• Textarea
• Tooltip

Layout Components

• PageHeader

Shared Components

• StatCard

Types

• UserRole - "admin" | "doctor" | "patient"
• User, AdminUser, DoctorUser, PatientUser
• Notification
• roleDisplayNames, roleColors, roleThemes

Utilities

• cn() - Tailwind class merging
• formatDate() - Date formatting
• formatTime() - Time formatting
• formatDateTime() - Combined date/time formatting
• getInitials() - Name to initials conversion