react-datepicker-bkrdmrcioglu 0.1.0 → 0.3.0

package/README.md

@@ -1,67 +1,67 @@
 # React DatePicker
 
-Modern, özelleştirilebilir ve kullanıcı dostu React DatePicker komponenti. Next.js ve Tailwind CSS ile geliştirilmiştir.
+Modern, customizable, and user-friendly React DatePicker component with dark mode and multi-language support.
 
-## 🚀 Özellikler
+[![View on GitHub](https://img.shields.io/badge/GitHub-View%20on%20GitHub-blue?logo=github)](https://github.com/bkrdmrcioglu/react-datepicker)
+[![Live Demo](https://img.shields.io/badge/Demo-Live%20Demo-green?logo=vercel)](https://react-datepicker-mu.vercel.app)
 
-- ✅ Modern ve şık tasarım
-- ✅ **Dark Mode** - Tam karanlık mod desteği
-- ✅ **11 Dil Desteği** - English, Türkçe, Deutsch, Français, Español, Italiano, Português, Русский, 日本語, 中文, العربية
-- ✅ Tarih seçimi
-- ✅ Tarih ve saat seçimi
-- ✅ Tarih aralığı seçimi (DateRangePicker)
-- ✅ Min/Max tarih kısıtlaması
-- ✅ Devre dışı bırakılabilir
-- ✅ TypeScript desteği
-- ✅ Tamamen özelleştirilebilir
-- ✅ Responsive tasarım
+## 🚀 Features
 
-## 📦 Kurulum
+- ✅ Modern and elegant design
+- ✅ **Dark Mode** - Full dark mode support
+- ✅ **11 Language Support** - English, Turkish, German, French, Spanish, Italian, Portuguese, Russian, Japanese, Chinese, Arabic
+- ✅ **Theme System** - 4 preset themes + custom theme support
+- ✅ **Storybook** - Interactive component showcase
+- ✅ **API Documentation** - Complete API reference
+- ✅ **Test Coverage** - 90+ unit tests
+- ✅ Date selection
+- ✅ Date and time selection
+- ✅ Date range selection (DateRangePicker)
+- ✅ Min/Max date constraints
+- ✅ Time Picker (TimePicker)
+- ✅ Disableable
+- ✅ TypeScript support
+- ✅ Fully customizable
+- ✅ Responsive design
 
-### NPM ile Kurulum
+
+## 📦 Installation
+
+### Install via NPM
 
 ```bash
 npm install react-datepicker-bkrdmrcioglu
-# veya
+# or
 yarn add react-datepicker-bkrdmrcioglu
-# veya
+# or
 pnpm add react-datepicker-bkrdmrcioglu
 ```
 
-### Gereksinimler
+### Requirements
 
-Bu paket Tailwind CSS kullanır. Projenizde Tailwind CSS kurulu olmalıdır:
+- React 16.8+
+- React DOM 16.8+
 
-```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-```
+### Import Styles
 
-`tailwind.config.js` dosyanıza şunu ekleyin:
+The component comes with its own CSS. Import it in your root layout or entry file:
 
-```js
-module.exports = {
-  content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
-    "./node_modules/react-datepicker-bkrdmrcioglu/**/*.{js,jsx,ts,tsx}"
-  ],
-  darkMode: 'class', // Dark mode için
-  // ... diğer ayarlarınız
-}
+```tsx
+import 'react-datepicker-bkrdmrcioglu/dist/style.css';
 ```
 
-## 🏃 Geliştirme (Bu Repo İçin)
+## 🏃 Development (For This Repo)
 
 ```bash
 npm install
 npm run dev
 ```
 
-Tarayıcınızda [http://localhost:3000](http://localhost:3000) adresini açın.
+Open [http://localhost:3000](http://localhost:3000) in your browser.
 
-## 📖 Kullanım
+## 📖 Usage
 
-### Temel Kullanım
+### Basic Usage
 
 ```tsx
 import { DatePicker } from 'react-datepicker-bkrdmrcioglu';
@@ -80,58 +80,58 @@ function MyComponent() {
 }
 ```
 
-### Dil Desteği
+### Language Support
 
 ```tsx
 import { DatePicker } from 'react-datepicker-bkrdmrcioglu';
 import type { Language } from 'react-datepicker-bkrdmrcioglu';
 
-// İngilizce (varsayılan)
+// English (default)
 <DatePicker language="en" />
 
-// Türkçe
+// Turkish
 <DatePicker language="tr" />
 
-// Almanca
+// German
 <DatePicker language="de" />
 
-// Fransızca
+// French
 <DatePicker language="fr" />
 
-// İspanyolca
+// Spanish
 <DatePicker language="es" />
 
-// İtalyanca
+// Italian
 <DatePicker language="it" />
 
-// Portekizce
+// Portuguese
 <DatePicker language="pt" />
 
-// Rusça
+// Russian
 <DatePicker language="ru" />
 
-// Japonca
+// Japanese
 <DatePicker language="ja" />
 
-// Çince
+// Chinese
 <DatePicker language="zh" />
 
-// Arapça
+// Arabic
 <DatePicker language="ar" />
 ```
 
-### Tarih ve Saat Seçimi
+### Date and Time Selection
 
 ```tsx
 <DatePicker
   value={date}
   onChange={setDate}
   showTime={true}
-  placeholder="Tarih ve saat seçin..."
+  placeholder="Select date and time..."
 />
 ```
 
-### Min/Max Tarih Kısıtlaması
+### Min/Max Date Constraints
 
 ```tsx
 const minDate = new Date();
@@ -147,7 +147,7 @@ maxDate.setDate(maxDate.getDate() + 30);
 />
 ```
 
-### Tarih Aralığı Seçimi
+### Date Range Selection
 
 ```tsx
 import { DateRangePicker } from 'react-datepicker-bkrdmrcioglu';
@@ -170,45 +170,76 @@ function MyComponent() {
 }
 ```
 
-## 🔧 API Referansı
+### Time Picker
 
-### DatePicker Props
+```tsx
+import { TimePicker } from 'react-datepicker-bkrdmrcioglu';
+import { useState } from 'react';
 
-| Prop | Tip | Varsayılan | Açıklama |
-|------|-----|------------|----------|
-| `value` | `Date \| null` | `undefined` | Seçili tarih |
-| `onChange` | `(date: Date \| null) => void` | `undefined` | Tarih değiştiğinde çağrılır |
-| `placeholder` | `string` | `"Tarih seçin..."` | Input placeholder metni |
-| `minDate` | `Date` | `undefined` | Minimum seçilebilir tarih |
-| `maxDate` | `Date` | `undefined` | Maksimum seçilebilir tarih |
-| `disabled` | `boolean` | `false` | Devre dışı bırakma |
-| `className` | `string` | `""` | Ek CSS sınıfları |
-| `showTime` | `boolean` | `false` | Saat seçimi göster |
-| `format` | `string` | `"DD/MM/YYYY"` | Tarih formatı |
-| `language` | `Language` | `"en"` | Dil seçimi (en, tr, de, fr, es, it, pt, ru, ja, zh, ar) |
+function MyComponent() {
+  const [time, setTime] = useState<string | null>(null);
 
-### DateRangePicker Props
+  return (
+    <TimePicker
+      value={time}
+      onChange={setTime}
+      placeholder="Select time..."
+    />
+  );
+}
+```
+
+## 🔧 API Reference
+
+### DatePicker Props
 
-| Prop | Tip | Varsayılan | Açıklama |
-|------|-----|------------|----------|
-| `startDate` | `Date \| null` | `undefined` | Başlangıç tarihi |
-| `endDate` | `Date \| null` | `undefined` | Bitiş tarihi |
-| `onChange` | `(start: Date \| null, end: Date \| null) => void` | `undefined` | Tarih değiştiğinde çağrılır |
-| `placeholder` | `string` | `"Tarih aralığı seçin..."` | Placeholder metni |
-| `minDate` | `Date` | `undefined` | Minimum seçilebilir tarih |
-| `maxDate` | `Date` | `undefined` | Maksimum seçilebilir tarih |
-| `disabled` | `boolean` | `false` | Devre dışı bırakma |
-| `className` | `string` | `""` | Ek CSS sınıfları |
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `Date \| null` | `undefined` | Selected date |
+| `onChange` | `(date: Date \| null) => void` | `undefined` | Called when date changes |
+| `placeholder` | `string` | `"Select date..."` | Input placeholder text |
+| `minDate` | `Date` | `undefined` | Minimum selectable date |
+| `maxDate` | `Date` | `undefined` | Maximum selectable date |
+| `disabled` | `boolean` | `false` | Disable the picker |
+| `className` | `string` | `""` | Additional CSS classes |
+| `showTime` | `boolean` | `false` | Show time selection |
+| `format` | `string` | `"DD/MM/YYYY"` | Date format |
+| `language` | `Language` | `"en"` | Language selection (en, tr, de, fr, es, it, pt, ru, ja, zh, ar) |
 
-## 🎨 Özelleştirme
+### DateRangePicker Props
 
-Komponentler Tailwind CSS kullanılarak oluşturulmuştur. Stilleri özelleştirmek için `components/DatePicker.tsx` dosyasındaki className'leri değiştirebilirsiniz.
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `startDate` | `Date \| null` | `undefined` | Start date |
+| `endDate` | `Date \| null` | `undefined` | End date |
+| `onChange` | `(start: Date \| null, end: Date \| null) => void` | `undefined` | Called when dates change |
+| `placeholder` | `string` | `"Select date range..."` | Placeholder text |
+| `minDate` | `Date` | `undefined` | Minimum selectable date |
+| `maxDate` | `Date` | `undefined` | Maximum selectable date |
+| `disabled` | `boolean` | `false` | Disable the picker |
+| `className` | `string` | `""` | Additional CSS classes |
+
+### TimePicker Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string \| null` | `undefined` | Selected time (HH:MM) |
+| `onChange` | `(time: string \| null) => void` | `undefined` | Called when time changes |
+| `placeholder` | `string` | `"Select time..."` | Placeholder text |
+| `disabled` | `boolean` | `false` | Disable the picker |
+| `className` | `string` | `""` | Additional CSS classes |
+| `format` | `"24h" \| "12h"` | `"24h"` | Time format (currently 24h) |
+| `language` | `Language` | `"en"` | Language selection |
+
+## 🎨 Customization
+
+Components are highly customizable through props, themes, and CSS.
 
 ### Dark Mode
 
-Dark mode otomatik olarak sistem tercihine göre ayarlanır veya `DarkModeToggle` komponenti ile manuel olarak kontrol edilebilir. Tüm komponentler dark mode'u destekler.
+Dark mode is automatically set based on system preference or can be controlled manually using the `DarkModeToggle` component. All components support dark mode.
 
-**Önemli:** Dark mode için HTML elementine `dark` class'ını eklemeniz gerekir:
+**Important:** You need to add the `dark` class to the HTML element for dark mode:
 
 ```tsx
 import { DarkModeToggle } from 'react-datepicker-bkrdmrcioglu';
@@ -218,19 +249,19 @@ function MyComponent() {
 }
 ```
 
-Dark mode'u manuel olarak kontrol etmek için:
+To manually control dark mode:
 
 ```tsx
-// Dark mode'u aç
+// Enable dark mode
 document.documentElement.classList.add('dark');
 
-// Dark mode'u kapat
+// Disable dark mode
 document.documentElement.classList.remove('dark');
 ```
 
-### Dil Seçici
+### Language Selector
 
-Dil seçimi için `LanguageSelector` komponentini kullanabilirsiniz:
+You can use the `LanguageSelector` component for language selection:
 
 ```tsx
 import { LanguageSelector, DatePicker } from 'react-datepicker-bkrdmrcioglu';
@@ -249,18 +280,87 @@ function MyComponent() {
 }
 ```
 
-## 📝 Lisans
+### Theme System
+
+Customize the appearance of DatePicker components using the built-in theme system:
+
+```tsx
+import { ThemeProvider, DatePicker } from 'react-datepicker-bkrdmrcioglu';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="material">
+      <DatePicker value={date} onChange={setDate} />
+    </ThemeProvider>
+  );
+}
+```
+
+#### Available Themes
+
+- `default` - Clean and modern design
+- `material` - Google Material Design inspired
+- `minimal` - Simple and clean
+- `glassmorphism` - Modern glass effect
+
+#### Custom Theme
+
+```tsx
+import { ThemeProvider } from 'react-datepicker-bkrdmrcioglu';
+import type { Theme } from 'react-datepicker-bkrdmrcioglu';
+
+const customTheme: Theme = {
+  name: 'Custom',
+  colors: {
+    primary: '#8b5cf6',
+    background: '#ffffff',
+    // ... other colors
+  },
+  // ... other theme properties
+};
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme={customTheme}>
+      <DatePicker />
+    </ThemeProvider>
+  );
+}
+```
+
+## 📚 Documentation
+
+- **Live Demo**: [https://react-datepicker-mu.vercel.app](https://react-datepicker-mu.vercel.app)
+- **API Reference**: `/docs/api` - Complete API documentation
+- **Theme Playground**: `/docs/themes` - Interactive theme customization
+- **Storybook**: Run `npm run storybook` for interactive component showcase
+
+## 🧪 Testing
+
+```bash
+# Run tests
+npm test
+
+# Run tests in watch mode
+npm run test:watch
+
+# Generate coverage report
+npm run test:coverage
+```
+
+## 📝 License
+
 
-MIT License - Özgürce kullanabilirsiniz.
+MIT License - Feel free to use it.
 
-## 🤝 Katkıda Bulunma
+## 🤝 Contributing
 
-Katkılarınızı bekliyoruz! Lütfen bir issue açın veya pull request gönderin.
+We welcome your contributions! Please open an issue or submit a pull request.
 
-## 📧 İletişim
+## 📧 Contact
 
-Sorularınız için GitHub Issues kullanabilirsiniz.
+You can use GitHub Issues for your questions.
 
 ---
 
-⭐ Bu projeyi beğendiyseniz yıldız vermeyi unutmayın!
+⭐ If you liked this project, don't forget to give it a star!

package/components/DarkModeToggle.tsx

@@ -4,14 +4,25 @@ import { useEffect, useState } from 'react';
 
 export default function DarkModeToggle() {
   const [isDark, setIsDark] = useState(false);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    setMounted(true);
     // Check initial theme
-    const darkMode = localStorage.getItem('darkMode') === 'true' || 
-                     (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);
-    setIsDark(darkMode);
+    const stored = localStorage.getItem('darkMode');
+    let initialDark = false;
     
-    if (darkMode) {
+    if (stored !== null) {
+      initialDark = stored === 'true';
+    } else {
+      // Check system preference
+      initialDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    
+    setIsDark(initialDark);
+    
+    // Apply dark mode immediately
+    if (initialDark) {
       document.documentElement.classList.add('dark');
     } else {
       document.documentElement.classList.remove('dark');
@@ -23,26 +34,45 @@ export default function DarkModeToggle() {
     setIsDark(newDarkMode);
     localStorage.setItem('darkMode', String(newDarkMode));
     
+    // Apply immediately to html element
+    const html = document.documentElement;
     if (newDarkMode) {
-      document.documentElement.classList.add('dark');
+      html.classList.add('dark');
+      html.classList.remove('light');
     } else {
-      document.documentElement.classList.remove('dark');
+      html.classList.remove('dark');
+      html.classList.add('light');
     }
   };
 
+  if (!mounted) {
+    return (
+      <button
+        className="p-2 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+        aria-label="Toggle dark mode"
+        type="button"
+        disabled
+      >
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+        </svg>
+      </button>
+    );
+  }
+
   return (
     <button
       onClick={toggleDarkMode}
-      className="relative p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+      className="p-2 rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
       aria-label="Toggle dark mode"
       type="button"
     >
       {isDark ? (
-        <svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
           <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
         </svg>
       ) : (
-        <svg className="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 20 20">
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
           <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
         </svg>
       )}