mrlib-ui/README.en.md

Modern React UI component library with TypeScript, Tailwind CSS, and multi-language support

# ⚡ mrlib - Modern React UI Library

A UI component library designed to create modern, lightweight and clean React applications.

## ✨ Features

- ⚡ **Fast Development**: Optimized build process with Vite
- 🎨 **Modern Design**: Modern interface inspired by clean and minimal design principles
- 📱 **Responsive**: Perfect appearance on all devices
- 🔧 **TypeScript**: Type safety and enhanced developer experience
- 🛡️ **Modern Tools**: ESLint, Prettier and other development tools
- 🚀 **Ready Components**: UI components and hooks you can start coding with immediately
- 🌙 **Dark Mode**: Full Tailwind CSS compatible dark mode support
- 🌍 **Multi-language**: Turkish and English language support

## 🚀 Quick Start

### Requirements

- Node.js 18+ 
- npm or yarn

### Installation

```bash
# Clone the project
git clone <repository-url>
cd mrlib

# Install dependencies
npm install

# Start development server
npm run dev
```

Open [http://localhost:3009](http://localhost:3009) in your browser.

## 📁 Project Structure

```
src/
├── components/          # UI components
│   ├── ui/             # Basic UI components
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   ├── Input.tsx
│   │   ├── Modal.tsx
│   │   ├── Toast.tsx
│   │   ├── Tooltip.tsx
│   │   ├── Select.tsx
│   │   ├── Checkbox.tsx
│   │   ├── Radio.tsx
│   │   ├── Switch.tsx
│   │   ├── Slider.tsx
│   │   ├── Progress.tsx
│   │   ├── Badge.tsx
│   │   ├── Avatar.tsx
│   │   ├── Container.tsx
│   │   ├── Divider.tsx
│   │   ├── Spacer.tsx
│   │   ├── Tabs.tsx
│   │   ├── Accordion.tsx
│   │   ├── DatePicker.tsx
│   │   ├── Table.tsx
│   │   ├── List.tsx
│   │   ├── Textarea.tsx
│   │   ├── Alert.tsx
│   │   ├── Skeleton.tsx
│   │   ├── Drawer.tsx
│   │   ├── Breadcrumb.tsx
│   │   ├── FileUpload.tsx
│   │   └── Dropdown.tsx
│   ├── Header.tsx
│   ├── Hero.tsx
│   ├── Features.tsx
│   └── Footer.tsx
├── contexts/            # React Contexts
│   ├── ThemeContext.tsx
│   ├── ToastContext.tsx
│   └── LanguageContext.tsx
├── hooks/               # Custom hooks
│   ├── useToggle.ts
│   ├── useDebounce.ts
│   ├── useLocalStorage.ts
│   ├── useResponsive.ts
│   ├── useClipboard.ts
│   ├── useScrollPosition.ts
│   ├── useMediaQuery.ts
│   └── index.ts
├── utils/               # Helper functions
│   ├── cn.ts
│   ├── format.ts
│   ├── validation.ts
│   └── index.ts
├── types/               # TypeScript type definitions
│   └── index.ts
├── pages/               # Page components
│   ├── Documentation.tsx
│   └── Examples.tsx
├── App.tsx
├── main.tsx
├── index.css
└── index.ts
```

## 🎨 Design System

### Color Palette

Color palette inspired by modern and clean design language:

- **Primary**: Modern Blue (#007AFF)
- **Success**: Modern Green (#34C759)
- **Warning**: Modern Orange (#FF9500)
- **Error**: Modern Red (#FF3B30)
- **Gray Scale**: Modern Gray (50-900)
- **Dark Mode**: Premium dark gray tones for sophisticated dark theme
- **Premium Palettes**: Gold, Silver, Platinum, Rose Gold, Emerald, Sapphire, Amethyst, Ruby, Topaz, Pearl, Onyx (50-900 shades)

### Typography

- **Font Family**: SF Pro Display/Text (Apple's system font)
- **Font Sizes**: Responsive and consistent typography scales

### Components

#### Button

```tsx
import { Button } from '@/components/ui/Button'

// Basic usage
<Button variant="primary" size="md">
  Click
</Button>

// Loading state
<Button loading={true}>
  Loading...
</Button>

// Different variants
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
```

#### Card

```tsx
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card'

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <CardContent>
    Content goes here
  </CardContent>
</Card>
```

#### Input

```tsx
import { Input } from '@/components/ui/Input'

<Input
  label="Email"
  type="email"
  placeholder="email@example.com"
  error="Please enter a valid email"
/>
```

#### Modal

```tsx
import { Modal } from '@/components/ui/Modal'

<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Modal Title"
>
  Modal content goes here
</Modal>
```

## 🪝 Custom Hooks

### useToggle

To toggle boolean state:

```tsx
import { useToggle } from '@/hooks'

const [isOpen, toggle, setIsOpen] = useToggle(false)
```

### useDebounce

To delay a value by specified time:

```tsx
import { useDebounce } from '@/hooks'

const debouncedValue = useDebounce(searchTerm, 300)
```

### useLocalStorage

For state synchronized with LocalStorage:

```tsx
import { useLocalStorage } from '@/hooks'

const [theme, setTheme] = useLocalStorage('theme', 'light')
```

### useResponsive

To track screen size:

```tsx
import { useResponsive } from '@/hooks'

const { isMobile, isTablet, isDesktop } = useResponsive()
```

### useClipboard

For clipboard operations:

```tsx
import { useClipboard } from '@/hooks'

const { copy, copied } = useClipboard()
```

## 🌙 Dark Mode

Dark mode support is fully integrated with Tailwind CSS:

```tsx
import { useTheme } from '@/contexts/ThemeContext'

const { theme, setTheme } = useTheme()

// Change theme
setTheme('dark') // 'light' | 'dark' | 'system'
```

## 🌍 Multi-language Support

Turkish and English language support:

```tsx
import { useLanguage } from '@/contexts/LanguageContext'

const { language, setLanguage, t } = useLanguage()

// Use translations
const title = t('nav.home') // 'Ana Sayfa' or 'Home'
```

## 🛠️ Development

### Commands

```bash
# Development server
npm run dev

# Production build
npm run build

# Type checking
npm run type-check

# Linting
npm run lint

# Preview
npm run preview
```

### Configuration

- **Vite**: Modern build tool and dev server
- **TypeScript**: Type safety
- **Tailwind CSS**: Utility-first CSS framework
- **ESLint**: Code linting
- **PostCSS**: CSS processing
- **Framer Motion**: Animations
- **Zod**: Schema validation

## 📦 Packaging

To use this starter kit in your own project:

```bash
# Build
npm run build

# Ready files will be created in dist folder
```

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Create a Pull Request

## 📄 License

This project is licensed under the MIT License.

## 🙏 Acknowledgments

- [React](https://react.dev/) - UI library
- [Vite](https://vitejs.dev/) - Build tool
- [Tailwind CSS](https://tailwindcss.com/) - CSS framework
- [Lucide React](https://lucide.dev/) - Icon library
- [Framer Motion](https://www.framer.com/motion/) - Animation library
- [Zod](https://zod.dev/) - Schema validation
- Modern design principles - Design inspiration

---

**Note**: This starter kit is created inspired by modern design principles.

## 📚 Documentation

Visit [http://localhost:3009/docs](http://localhost:3009/docs) for detailed documentation.

## 🎯 Examples

Visit [http://localhost:3009/examples](http://localhost:3009/examples) for live examples.