pure-react-ui 1.1.0 → 1.3.0

package/README.md

@@ -0,0 +1,321 @@
+# Advanced Professional Button Component
+
+A modern, fully-featured React button component with TypeScript support, multiple variants, sizes, and advanced features like ripple effects, loading states, and elevation shadows.
+
+## Features
+
+✨ **Multiple Variants**: Solid, Outline, Ghost, and Gradient styles  
+🎨 **6 Color Schemes**: Primary, Secondary, Success, Danger, Warning, Info  
+📏 **5 Size Options**: Extra Small, Small, Medium, Large, Extra Large  
+🎭 **Advanced Effects**: Ripple animation, Elevation shadows, Smooth transitions  
+♿ **Accessible**: ARIA attributes, Keyboard navigation, Focus states  
+🔄 **Loading States**: Built-in spinner with disabled interaction  
+🎯 **Icon Support**: Left and right icon positioning  
+📱 **Responsive**: Mobile-friendly with adaptive sizing  
+⚡ **TypeScript**: Full type safety and IntelliSense support  
+🎪 **2px Border Radius**: Sharp, professional appearance
+
+## Installation
+
+```bash
+# Copy these files to your project:
+# - Button.tsx
+# - Button.css
+```
+
+## Basic Usage
+
+```tsx
+import { Button } from './components/Button';
+import './components/Button.css';
+
+function App() {
+  return (
+    <Button variant="primary" size="medium">
+      Click Me
+    </Button>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | - | Button content (required) |
+| `variant` | `string` | `'primary'` | Button style variant |
+| `size` | `'xs' \| 'small' \| 'medium' \| 'large' \| 'xl'` | `'medium'` | Button size |
+| `loading` | `boolean` | `false` | Show loading spinner |
+| `disabled` | `boolean` | `false` | Disable button interaction |
+| `iconLeft` | `ReactNode` | - | Icon before text |
+| `iconRight` | `ReactNode` | - | Icon after text |
+| `fullWidth` | `boolean` | `false` | Make button full width |
+| `rounded` | `boolean` | `false` | Use pill-shaped border radius |
+| `elevation` | `'none' \| 'sm' \| 'md' \| 'lg'` | `'none'` | Shadow elevation level |
+| `ripple` | `boolean` | `true` | Enable ripple effect on click |
+| `className` | `string` | `''` | Additional CSS classes |
+| `onClick` | `function` | - | Click handler |
+
+Plus all standard HTML button attributes.
+
+## Variants
+
+### Solid Variants
+```tsx
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="success">Success</Button>
+<Button variant="danger">Danger</Button>
+<Button variant="warning">Warning</Button>
+<Button variant="info">Info</Button>
+```
+
+### Outline Variants
+```tsx
+<Button variant="outline-primary">Primary</Button>
+<Button variant="outline-secondary">Secondary</Button>
+<Button variant="outline-success">Success</Button>
+<Button variant="outline-danger">Danger</Button>
+<Button variant="outline-warning">Warning</Button>
+<Button variant="outline-info">Info</Button>
+```
+
+### Ghost Variants
+```tsx
+<Button variant="ghost-primary">Primary</Button>
+<Button variant="ghost-secondary">Secondary</Button>
+<Button variant="ghost-success">Success</Button>
+<Button variant="ghost-danger">Danger</Button>
+<Button variant="ghost-warning">Warning</Button>
+<Button variant="ghost-info">Info</Button>
+```
+
+### Gradient Variants
+```tsx
+<Button variant="gradient-primary">Gradient Primary</Button>
+<Button variant="gradient-success">Gradient Success</Button>
+<Button variant="gradient-danger">Gradient Danger</Button>
+```
+
+## Examples
+
+### With Icons
+
+```tsx
+import { Download, Check, Search } from 'lucide-react';
+
+<Button variant="primary" iconLeft={<Download />}>
+  Download
+</Button>
+
+<Button variant="success" iconRight={<Check />}>
+  Confirm
+</Button>
+
+<Button variant="outline-primary" iconLeft={<Search />}>
+  Search
+</Button>
+```
+
+### Loading State
+
+```tsx
+const [loading, setLoading] = useState(false);
+
+const handleSubmit = async () => {
+  setLoading(true);
+  await someAsyncOperation();
+  setLoading(false);
+};
+
+<Button 
+  variant="primary" 
+  loading={loading}
+  onClick={handleSubmit}
+>
+  {loading ? 'Processing...' : 'Submit'}
+</Button>
+```
+
+### Different Sizes
+
+```tsx
+<Button size="xs">Extra Small</Button>
+<Button size="small">Small</Button>
+<Button size="medium">Medium</Button>
+<Button size="large">Large</Button>
+<Button size="xl">Extra Large</Button>
+```
+
+### With Elevation
+
+```tsx
+<Button variant="primary" elevation="sm">Small Shadow</Button>
+<Button variant="primary" elevation="md">Medium Shadow</Button>
+<Button variant="primary" elevation="lg">Large Shadow</Button>
+```
+
+### Rounded Buttons
+
+```tsx
+<Button variant="primary" rounded>
+  Rounded Button
+</Button>
+
+<Button variant="outline-success" rounded elevation="md">
+  Rounded with Shadow
+</Button>
+```
+
+### Full Width
+
+```tsx
+<Button variant="gradient-primary" fullWidth size="large">
+  Full Width Button
+</Button>
+```
+
+### Disabled State
+
+```tsx
+<Button variant="primary" disabled>
+  Disabled Button
+</Button>
+```
+
+### Advanced Combinations
+
+```tsx
+<Button 
+  variant="gradient-primary"
+  size="large"
+  rounded
+  elevation="lg"
+  iconLeft={<Download />}
+>
+  Premium Action
+</Button>
+
+<Button 
+  variant="outline-success"
+  size="large"
+  rounded
+  iconRight={<Check />}
+  onClick={handleConfirm}
+>
+  Confirm Choice
+</Button>
+```
+
+## Styling Customization
+
+### Override Styles
+
+You can override default styles by targeting CSS classes:
+
+```css
+/* Custom primary color */
+.pru-btn-primary {
+  background-color: #your-color;
+}
+
+.pru-btn-primary:hover:not(:disabled) {
+  background-color: #your-hover-color;
+}
+
+/* Custom size */
+.pru-btn-custom {
+  padding: 12px 24px;
+  font-size: 15px;
+}
+
+/* Custom border radius */
+.pru-btn {
+  border-radius: 4px; /* Override default 2px */
+}
+```
+
+### Additional Classes
+
+```tsx
+<Button 
+  variant="primary" 
+  className="my-custom-class"
+>
+  Custom Button
+</Button>
+```
+
+## Accessibility
+
+The button component includes:
+
+- ✅ Proper ARIA attributes (`aria-disabled`, `aria-busy`)
+- ✅ Keyboard navigation support
+- ✅ Focus visible states
+- ✅ Screen reader friendly loading states
+- ✅ Disabled state handling
+- ✅ Semantic HTML button element
+
+## Best Practices
+
+1. **Use appropriate variants** for different actions:
+   - `primary` for main actions
+   - `secondary` for secondary actions
+   - `success` for confirmations
+   - `danger` for destructive actions
+   - `outline` for less prominent actions
+   - `ghost` for tertiary actions
+
+2. **Choose the right size**:
+   - `xs` for compact UIs
+   - `small` for inline actions
+   - `medium` for most use cases
+   - `large` for CTAs
+   - `xl` for hero sections
+
+3. **Loading states**: Always show loading feedback for async operations
+
+4. **Icons**: Use meaningful icons that enhance understanding
+
+5. **Elevation**: Use shadows to create visual hierarchy
+
+## Browser Support
+
+- ✅ Chrome (latest)
+- ✅ Firefox (latest)
+- ✅ Safari (latest)
+- ✅ Edge (latest)
+- ✅ Mobile browsers
+
+## Performance
+
+- Lightweight CSS with efficient selectors
+- Optimized animations using transform and opacity
+- Minimal JavaScript overhead
+- No external dependencies (except React)
+
+## TypeScript Support
+
+Full TypeScript support with:
+- Type-safe props
+- IntelliSense autocomplete
+- Type checking for variants and sizes
+- Proper event typing
+
+## License
+
+MIT License - Feel free to use in your projects!
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit issues or pull requests.
+
+## Credits
+
+Created with ❤️ for professional React applications.
+
+---
+
+**Version**: 1.0.0  
+**Last Updated**: 2024