@ttianqii/takaui 0.0.6 → 0.0.61

package/README.md

@@ -1,9 +1,41 @@
 # TakaUI
 
+[![npm version](https://img.shields.io/npm/v/@ttianqii/takaui.svg)](https://www.npmjs.com/package/@ttianqii/takaui)
+[![npm downloads](https://img.shields.io/npm/dm/@ttianqii/takaui.svg)](https://www.npmjs.com/package/@ttianqii/takaui)
+[![license](https://img.shields.io/npm/l/@ttianqii/takaui.svg)](https://github.com/ttianqii/takaui/blob/main/LICENSE)
+
 A modern, customizable React UI component library built with TypeScript, Tailwind CSS, and Radix UI primitives.
 
+**Current Version:** 0.0.6
+
+## ✨ What's New in 0.0.6
+
+- 🎯 **DatePicker Range Selection** - Select date ranges with 1 or 2 month views
+- 🎨 **Enhanced Hover States** - Improved visual feedback for range selection
+- 🔧 **DataGrid System** - New modular table components for better composition
+- 📅 **Schedule Component** - Now supports Date type in custom metadata fields
+- 🐛 **Bug Fixes** - Text alignment and various improvements
+
 ## 📦 Installation
 
+### Quick Setup (Recommended)
+
+Run the automatic setup wizard:
+
+```bash
+npm install @ttianqii/takaui
+npx takaui-setup
+```
+
+This will:
+- ✅ Configure your Tailwind config automatically
+- ✅ Add CSS import to your main file
+- ✅ Verify your setup is correct
+
+### Manual Installation
+
+If you prefer manual setup:
+
 ```bash
 # npm
 npm install @ttianqii/takaui
@@ -63,15 +95,18 @@ Import the TakaUI styles in your main entry file (e.g., `main.tsx` or `App.tsx`)
 import '@ttianqii/takaui/styles.css'
 ```
 
+**💡 Tip:** Run `npx takaui-setup` to automatically add this import!
+
 ## 🚀 Quick Start
 
 ```tsx
-import { Calendar, TimePicker, DataTable } from '@ttianqii/takaui'
+import { DatePicker, TimePicker, DataTable } from '@ttianqii/takaui'
 import '@ttianqii/takaui/styles.css'
 import { useState } from 'react'
 
 function App() {
   const [date, setDate] = useState<Date | undefined>(new Date())
+  const [dateRange, setDateRange] = useState<{ from: Date; to?: Date }>()
   
   // DataTable example - No TanStack required!
   const columns = [
@@ -95,10 +130,18 @@ function App() {
   
   return (
     <div>
-      <Calendar
-        mode="single"
-        selected={date}
-        onSelect={setDate}
+      {/* Single Date Picker */}
+      <DatePicker
+        date={date}
+        onDateChange={setDate}
+      />
+      
+      {/* Date Range Picker - NEW! */}
+      <DatePicker
+        mode="range"
+        dateRange={dateRange}
+        onDateRangeChange={setDateRange}
+        numberOfMonths={2}
       />
       
       <DataTable 
@@ -120,18 +163,25 @@ TakaUI includes the following components:
 
 - **[Calendar](./docs/CALENDAR.md)** - Flexible date picker with multiple selection modes
 - **[DatePicker](./docs/DATEPICKER.md)** - Date picker with popover and custom formatting
+  - ✨ **NEW:** Range selection with dual month view
+  - ✨ **NEW:** Enhanced hover states for better UX
 - **[TimePicker](./docs/TIMEPICKER.md)** - Time picker with 12h/24h formats and timezone support
 - **[DropdownMenu](./docs/DROPDOWN.md)** - Accessible dropdown menu component
 
 ### Data Display Components
 
-- **[DataTable](./docs/DATATABLE_NEW.md)** - **NEW!** Independent table with sorting, filtering, and pagination (No TanStack!)
+- **[DataTable](./docs/DATATABLE_NEW.md)** - Independent table with sorting, filtering, and pagination (No TanStack!)
   - ✅ Zero external dependencies (except icons)
   - ✅ Built-in sorting, pagination, search
   - ✅ Custom cell rendering
   - ✅ Loading states
   - [Quick Reference](./DATATABLE_QUICKREF.md) - Cheat sheet
+- **DataGrid System** - ✨ **NEW!** Modular table components for custom layouts
+  - DataGrid, DataGridTable, DataGridPagination
+  - DataGridColumnHeader, DataGridRowSelect
+  - Perfect for complex table compositions
 - **[Schedule](./docs/SCHEDULE.md)** - Weekly schedule component with custom fields
+  - ✨ **NEW:** Supports Date type in metadata
 - **[WeekNavigator](./docs/WEEKNAVIGATOR.md)** - Week navigation with date range display
 
 ### Advanced Table System (Optional)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ttianqii/takaui",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.61",
   "type": "module",
   "main": "./dist/takaui.cjs",
   "module": "./dist/takaui.js",
@@ -15,8 +15,12 @@
     "./styles.css": "./dist/takaui.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/cli"
   ],
+  "bin": {
+    "takaui-setup": "./src/cli/setup.js"
+  },
   "sideEffects": [
     "**/*.css"
   ],

package/src/cli/setup.js

@@ -0,0 +1,135 @@
+#!/usr/bin/env node
+
+import { readFileSync, writeFileSync, existsSync } from 'fs';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+console.log('\n🎨 TakaUI Setup Wizard\n');
+
+const cwd = process.cwd();
+
+// 1. Check for Tailwind config
+const tailwindConfigFiles = [
+  'tailwind.config.js',
+  'tailwind.config.ts',
+  'tailwind.config.mjs',
+  'tailwind.config.cjs'
+];
+
+let tailwindConfigPath = null;
+for (const file of tailwindConfigFiles) {
+  if (existsSync(join(cwd, file))) {
+    tailwindConfigPath = file;
+    break;
+  }
+}
+
+if (!tailwindConfigPath) {
+  console.log('⚠️  No Tailwind config found!');
+  console.log('\nPlease install Tailwind CSS first:');
+  console.log('  npm install -D tailwindcss postcss autoprefixer');
+  console.log('  npx tailwindcss init');
+  console.log('\nThen run this setup again: npx takaui-setup\n');
+  process.exit(1);
+}
+
+console.log(`✅ Found Tailwind config: ${tailwindConfigPath}`);
+
+// 2. Update Tailwind config
+try {
+  let configContent = readFileSync(join(cwd, tailwindConfigPath), 'utf-8');
+  
+  const takaUIPath = './node_modules/@ttianqii/takaui/dist/**/*.{js,mjs,cjs}';
+  
+  if (configContent.includes(takaUIPath)) {
+    console.log('✅ TakaUI already configured in Tailwind');
+  } else {
+    // Add TakaUI to content array
+    const contentRegex = /content:\s*\[([\s\S]*?)\]/;
+    const match = configContent.match(contentRegex);
+    
+    if (match) {
+      const currentContent = match[1];
+      const updatedContent = currentContent.trim() 
+        ? `${currentContent.trim()},\n    "${takaUIPath}"`
+        : `"${takaUIPath}"`;
+      
+      configContent = configContent.replace(
+        contentRegex,
+        `content: [\n    ${updatedContent}\n  ]`
+      );
+      
+      writeFileSync(join(cwd, tailwindConfigPath), configContent, 'utf-8');
+      console.log('✅ Updated Tailwind config with TakaUI paths');
+    } else {
+      console.log('⚠️  Could not auto-update Tailwind config');
+      console.log(`\nPlease manually add to ${tailwindConfigPath}:`);
+      console.log(`  content: [`);
+      console.log(`    "${takaUIPath}"`);
+      console.log(`  ]`);
+    }
+  }
+} catch (error) {
+  console.log('⚠️  Could not update Tailwind config:', error.message);
+}
+
+// 3. Check for CSS import
+const possibleEntryPoints = [
+  'src/main.tsx',
+  'src/main.ts',
+  'src/main.jsx',
+  'src/main.js',
+  'src/index.tsx',
+  'src/index.ts',
+  'src/index.jsx',
+  'src/index.js',
+  'src/App.tsx',
+  'src/App.ts',
+  'src/App.jsx',
+  'src/App.js',
+];
+
+let entryPoint = null;
+for (const file of possibleEntryPoints) {
+  if (existsSync(join(cwd, file))) {
+    entryPoint = file;
+    break;
+  }
+}
+
+console.log('\n📝 Next Steps:\n');
+
+if (entryPoint) {
+  const entryContent = readFileSync(join(cwd, entryPoint), 'utf-8');
+  
+  if (entryContent.includes("@ttianqii/takaui/styles.css")) {
+    console.log(`✅ CSS already imported in ${entryPoint}`);
+  } else {
+    console.log(`Add this import to your ${entryPoint}:`);
+    console.log(`  import '@ttianqii/takaui/styles.css'`);
+    
+    // Auto-add if it's a simple case
+    if (entryContent.includes('import')) {
+      const lines = entryContent.split('\n');
+      const lastImportIndex = lines.findLastIndex(line => line.trim().startsWith('import'));
+      
+      if (lastImportIndex !== -1) {
+        lines.splice(lastImportIndex + 1, 0, "import '@ttianqii/takaui/styles.css'");
+        writeFileSync(join(cwd, entryPoint), lines.join('\n'), 'utf-8');
+        console.log(`  ✅ Auto-added CSS import to ${entryPoint}`);
+      }
+    }
+  }
+} else {
+  console.log('Add this import to your main entry file (e.g., main.tsx or App.tsx):');
+  console.log("  import '@ttianqii/takaui/styles.css'");
+}
+
+console.log('\n✨ Setup Complete!\n');
+console.log('You can now use TakaUI components:');
+console.log("  import { DatePicker, DataTable, Calendar } from '@ttianqii/takaui'\n");
+console.log('📚 Documentation: https://github.com/ttianqii/takaui\n');