docthub-core-components

A modern, reusable React component library built with TypeScript and Vite. Includes accessible, customizable UI components for rapid development.

✨ Features

• 🚀 Modern Stack: Built with React 18, TypeScript, and Vite
• 📦 Tree-shakable: Lightweight and optimized bundle
• 🎨 Comprehensive: 30+ components including buttons, inputs, dialogs, pickers, and more
• ♿ Accessible: WCAG compliant with proper ARIA attributes
• 🎯 Customizable: Easy theming with CSS variables and Tailwind CSS
• 📚 Well-documented: Comprehensive API documentation and Storybook examples
• 🧪 Tested: Full test suite using Vitest and Testing Library
• 📊 Optimized: Bundle size analysis and performance monitoring

📖 Documentation

For comprehensive API documentation, examples, and usage instructions, see:

📚 API Documentation

The API documentation covers:

• All 30+ components with detailed props and examples
• TypeScript interfaces and type definitions
• Best practices and patterns
• Accessibility guidelines
• Theming and customization
• Migration guides

📦 Installation

npm install docthub-core-components
# or
yarn add docthub-core-components

Peer Dependencies

npm install react@^18.0.0 react-dom@^18.0.0

🌀 Usage with Tailwind CSS

To ensure all Tailwind classes (including arbitrary values like text-['#002830']) work with docthub-core-components, follow these steps:

1. Do NOT import docthub-core-components/dist/docthub-core-components.css unless you only want base styles. Let your app's Tailwind build generate all needed utilities.

2. Add the library to your tailwind.config.js content array:

   module.exports = {
     content: [
       "./node_modules/docthub-core-components/dist/**/*.js",
       "./pages/**/*.{ts,tsx,js,jsx}",
       "./components/**/*.{ts,tsx,js,jsx}",
       "./app/**/*.{ts,tsx,js,jsx}",
       "./src/**/*.{ts,tsx,js,jsx}",
     ],
     // ...rest of config
   }

This ensures all Tailwind classes used in your app and in the component library are available, including arbitrary values.

🚀 Quick Start

import { 
  DoctButton, 
  DoctTypography, 
  LabeledInput,
  SearchInput,
  DatePickerField 
} from 'docthub-core-components';

function App() {
  return (
    <div className="p-6 space-y-4">
      <DoctTypography variant="h1" weight="bold">
        Welcome to DocthHub Components
      </DoctTypography>
      
      <SearchInput 
        placeholder="Search anything..." 
        size="large"
      />
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <LabeledInput
          label="Email"
          type="email"
          placeholder="Enter your email"
          required
        />
        
        <DatePickerField
          label="Date of Birth"
          placeholder="Select date"
        />
      </div>
      
      <div className="flex gap-2">
        <DoctButton variant="outline">
          Cancel
        </DoctButton>
        <DoctButton variant="primary" size="large">
          Get Started
        </DoctButton>
      </div>
    </div>
  );
}

🧩 Component Categories

Core Components

• DoctButton - Flexible button with multiple variants and icon support
• DoctTypography - Comprehensive typography system
• DoctAnimationLoader - Loading states

Input Components

• LabeledInput - Input with integrated label and validation
• PasswordInput - Password field with show/hide toggle
• OtpInput - One-time password input
• TextareaField - Multi-line text input
• CurrencyInput - Currency-specific input formatting

Picker Components

• DatePickerField - Calendar date picker
• SelectField - Dropdown with search functionality

Search Components

• SearchInput - Search field with icon
• AutoComplete - Autocomplete with suggestions
• DoctAutocomplete - Enhanced autocomplete

Display Components

• DoctChip - Tags and labels
• ExpandableCard - Collapsible content cards

Composed Components

• SearchFilterSection - Complete search and filter UI
• UserRegistrationSection - Full registration form
• AddressFormSection - Address input form
• ContactFormSection - Contact information form

Base UI Components

• Alert, Avatar, Checkbox, Dialog, Drawer, DropdownMenu
• Popover, RadioGroup, Tabs, Toast, Tooltip
• And more foundational components

🎨 Theming

Components support theming via CSS custom properties:

:root {
  --customBlue: #3b82f6;
  --foreground: #000000;
  --background: #ffffff;
  --muted-foreground: #6b7280;
  --destructive: #ef4444;
  /* ... customize as needed */
}

🛠️ Development

Setup

git clone <repository>
cd docthub-core-components
npm install

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run storybook    # Start Storybook
npm test            # Run test suite
npm run analyze     # Bundle size analysis

📚 Storybook

Explore all components interactively:

npm run storybook

View component examples, props, and interactive demos at http://localhost:6006

🧪 Testing

Comprehensive test suite with Vitest and Testing Library:

npm test            # Run all tests
npm test -- --watch # Watch mode
npm test -- --coverage # Coverage report

Note: Some Radix UI Select component tests are skipped due to JSDOM limitations.

📊 Bundle Analysis

Analyze bundle size and dependencies (local development only):

npm run analyze

Opens dist/bundle-visualizer.html with detailed treemap visualization.

Note: Bundle analysis uses a separate configuration to prevent deployment issues in cloud environments like Vercel. Use npm run build for production builds.

🔗 Peer Dependencies

• react ^18.0.0
• react-dom ^18.0.0

📝 TypeScript

Fully typed with TypeScript. Export interfaces for custom implementations:

import type { 
  DoctButtonProps, 
  LabeledInputProps,
  SearchInputProps 
} from 'docthub-core-components';

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Follow the existing code style
4. Add tests for new components
5. Update documentation
6. Submit a pull request

See API Documentation for detailed guidelines.

📄 License

MIT License - see LICENSE file for details.

📚 View Full API Documentation