docthub-core-components 1.0.15 → 1.0.16

package/README.md

@@ -4,11 +4,28 @@ A modern, reusable React component library built with TypeScript and Vite. Inclu
 
 ## ✨ Features
 
-- Built with React 18, TypeScript, and Vite
-- Tree-shakable and lightweight
-- Includes buttons, inputs, dialogs, pickers, and more
-- Designed for easy theming and customization
-- Comprehensive test suite using Vitest and Testing Library
+- **🚀 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](./API_DOCUMENTATION.md)**
+
+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
 
@@ -18,58 +35,199 @@ npm install docthub-core-components
 yarn add docthub-core-components
 ```
 
-## 🚀 Usage
+### Peer Dependencies
+
+```bash
+npm install react@^18.0.0 react-dom@^18.0.0
+```
+
+## 🚀 Quick Start
 
 ```tsx
-import { Button, PasswordInput, SelectField } from 'docthub-core-components';
+import { 
+  DoctButton, 
+  DoctTypography, 
+  LabeledInput,
+  SearchInput,
+  DatePickerField 
+} from 'docthub-core-components';
 
 function App() {
   return (
-    <div>
-      <Button variant="primary">Click me</Button>
-      <PasswordInput label="Password" onChange={val => console.log(val)} />
-      <SelectField label="Account Type" options={[{ value: 'user', label: 'User' }]} />
+    <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>
   );
 }
 ```
 
-## 🧩 Components
+## 🧩 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:
+
+```css
+:root {
+  --customBlue: #3b82f6;
+  --foreground: #000000;
+  --background: #ffffff;
+  --muted-foreground: #6b7280;
+  --destructive: #ef4444;
+  /* ... customize as needed */
+}
+```
 
-- `Button`
-- `PasswordInput`
-- `SelectField`
-- `LabeledInput`
-- `DatePickerField`
-- `OtpInput`
-- `Toast`
-- ...and more!
+## 🛠️ Development
 
-## 🔗 Peer Dependencies
+### Setup
+```bash
+git clone <repository>
+cd docthub-core-components
+npm install
+```
 
-- `react` (v18+)
-- `react-dom` (v18+)
+### Available Scripts
+```bash
+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
+```
 
-## 🛠️ Development
+## 📚 Storybook
 
-Clone the repo and run:
+Explore all components interactively:
 
 ```bash
-npm install
-npm run dev
+npm run storybook
 ```
 
+View component examples, props, and interactive demos at `http://localhost:6006`
+
 ## 🧪 Testing
 
-- All tests are run with [Vitest](https://vitest.dev/) and [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/).
-- To run the test suite:
+Comprehensive test suite with Vitest and Testing Library:
 
 ```bash
-npm test
+npm test            # Run all tests
+npm test -- --watch # Watch mode
+npm test -- --coverage # Coverage report
 ```
 
-- **Note:** Some tests for components using Radix UI's Select are skipped due to [JSDOM limitations with pointer events](https://github.com/radix-ui/primitives/issues/1822). All other tests pass without workarounds.
+**Note**: Some Radix UI Select component tests are skipped due to [JSDOM limitations](https://github.com/radix-ui/primitives/issues/1822).
+
+## 📊 Bundle Analysis
+
+Analyze bundle size and dependencies (local development only):
+
+```bash
+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:
+
+```tsx
+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](./API_DOCUMENTATION.md#contributing) for detailed guidelines.
 
 ## 📄 License
 
-MIT
+MIT License - see [LICENSE](./LICENSE) file for details.
+
+---
+
+**[📚 View Full API Documentation](./API_DOCUMENTATION.md)**