valknar/units-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
units-ui/package.json

32 lines
700 B
JSON
Raw Permalink Normal View History

feat: initialize Next.js 16 project with TypeScript and Tailwind CSS 4 Set up complete Next.js 16 development environment: - Next.js 16.0.1 with App Router and Turbopack - React 19.2.0 with TypeScript 5.9 - Tailwind CSS 4.1.17 with custom category colors - ESLint 9 with Next.js config - Static site generation enabled (output: 'export') Project structure: - app/ directory with layout, page, and globals.css - Tailwind config with 23 category-specific colors - TypeScript config with strict mode and path aliases - Complete .gitignore for Next.js projects Dependencies installed: - convert-units 2.3.4 for unit conversions - All React 19 and Next.js 16 dependencies - Development tooling (TypeScript, ESLint, Tailwind) Ready for Phase 2: Core conversion engine implementation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 09:21:56 +01:00
{
"name": "units-ui",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
feat: implement Phase 2 - Core conversion engine and UI Complete Phase 2 implementation with working unit converter: Core Conversion Engine (lib/units.ts): - Type-safe wrapper for convert-units library - Support for all 23 measures with TypeScript types - getAllMeasures() - Get all available categories - getUnitsForMeasure() - Get units for specific measure - getUnitInfo() - Get detailed unit information - convertUnit() - Convert between two units - convertToAll() - Convert to all compatible units - getCategoryColor() - Get Tailwind color class for measure - formatMeasureName() - Format measure names for display - searchUnits() - Fuzzy search across all units Utility Functions (lib/utils.ts): - cn() - Merge Tailwind classes with clsx and tailwind-merge - formatNumber() - Smart number formatting with scientific notation - debounce() - Debounce helper for inputs - parseNumberInput() - Parse user input to number - getRelativeTime() - Format timestamps UI Components: - Input - Styled input with focus states - Button - 6 variants (default, destructive, outline, secondary, ghost, link) - Card - Card container with header, title, description, content, footer Main Converter Component (components/converter/MainConverter.tsx): - Real-time conversion as user types - Category selection with 23 color-coded buttons - Input field with unit selector - Grid display of all conversions in selected measure - Color-coded result cards with category colors - Responsive layout (1/2/3 column grid) Homepage Updates: - Integrated MainConverter component - Clean header with gradient text - Uses design system colors Dependencies Added: - clsx - Class name utilities - tailwind-merge - Merge Tailwind classes intelligently Features Working: ✓ Select from 23 measurement categories ✓ Real-time conversion to all compatible units ✓ Color-coded categories ✓ Formatted number display ✓ Responsive design 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 09:34:57 +01:00
"clsx": "^2.1.1",
refactor: migrate to Tailwind CSS 4 native configuration Convert from Tailwind CSS 3 style to Tailwind CSS 4 native approach: - Install @tailwindcss/postcss plugin - Create postcss.config.mjs with Tailwind PostCSS plugin - Migrate all custom theme colors to globals.css using @theme directive - Remove tailwind.config.ts (no longer needed in Tailwind CSS 4) - Update globals.css from @import style to native CSS with custom properties Custom theme includes: - 23 category-specific colors as CSS custom properties - --color-category-* naming convention for all unit types - Follows Tailwind CSS 4 best practices with @theme block Benefits: - Native CSS features, no JS config needed - Better performance with PostCSS plugin - Cleaner separation of concerns - Follows Tailwind CSS 4 migration guide 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 09:26:11 +01:00
"convert-units": "^2.3.4",
feat: implement Phase 3 - Advanced UX features and interactivity Add comprehensive UX enhancements with innovative features: 🔍 Fuzzy Search Component (SearchUnits.tsx): - Powered by Fuse.js for intelligent fuzzy matching - Searches across unit abbreviations, names, and categories - Real-time dropdown with results - Keyboard shortcut: Press "/" to focus search - Press Escape to close - Click outside to dismiss - Shows measure category with color dot - Top 10 results displayed - Smart weighting: abbr (2x), singular/plural (1.5x), measure (1x) 💾 Conversion History (ConversionHistory.tsx): - LocalStorage persistence (max 50 entries) - Auto-saves conversions as user types - Collapsible history panel - Click to restore previous conversion - Clear all with confirmation - Shows relative time (just now, 5m ago, etc.) - Live updates across tabs with storage events - Custom event dispatch for same-window updates 🌓 Dark Mode Support: - ThemeProvider with light/dark/system modes - Persistent theme preference in localStorage - Smooth theme transitions - ThemeToggle component with animated sun/moon icons - Gradient text adapts to theme - System preference detection ⭐ Favorites & Copy Features: - Star button to favorite units (localStorage) - Copy to clipboard with visual feedback - Hover to reveal action buttons - Check icon confirmation for 2 seconds - Yellow star fill for favorited units ⌨️ Keyboard Shortcuts: - "/" - Focus search input - "Escape" - Close search, blur inputs - More shortcuts ready to add (Tab, Ctrl+K, etc.) 📦 LocalStorage Utilities (lib/storage.ts): - saveToHistory() - Add conversion record - getHistory() - Retrieve history - clearHistory() - Clear all history - getFavorites() / addToFavorites() / removeFromFavorites() - toggleFavorite() - Toggle favorite status - Type-safe ConversionRecord interface - Automatic error handling 🎨 Enhanced MainConverter: - Integrated search at top - Conversion history at bottom - Copy & favorite buttons on each result card - Hover effects with opacity transitions - Auto-save to history on conversion - Click history item to restore conversion - Visual feedback for all interactions 📱 Updated Layout & Page: - ThemeProvider wraps entire app - suppressHydrationWarning for SSR - Top navigation bar with theme toggle - Keyboard hint for search - Dark mode gradient text variants Dependencies Added: - fuse.js 7.1.0 - Fuzzy search engine - lucide-react 0.553.0 - Icon library (Search, Copy, Star, Check, etc.) Features Now Working: ✅ Intelligent fuzzy search across 187 units ✅ Conversion history with persistence ✅ Dark mode with system detection ✅ Copy any result to clipboard ✅ Favorite units for quick access ✅ Keyboard shortcuts (/, Esc) ✅ Smooth animations and transitions ✅ Mobile-responsive design 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 10:14:03 +01:00
"fuse.js": "^7.1.0",
"lucide-react": "^0.553.0",
feat: initialize Next.js 16 project with TypeScript and Tailwind CSS 4 Set up complete Next.js 16 development environment: - Next.js 16.0.1 with App Router and Turbopack - React 19.2.0 with TypeScript 5.9 - Tailwind CSS 4.1.17 with custom category colors - ESLint 9 with Next.js config - Static site generation enabled (output: 'export') Project structure: - app/ directory with layout, page, and globals.css - Tailwind config with 23 category-specific colors - TypeScript config with strict mode and path aliases - Complete .gitignore for Next.js projects Dependencies installed: - convert-units 2.3.4 for unit conversions - All React 19 and Next.js 16 dependencies - Development tooling (TypeScript, ESLint, Tailwind) Ready for Phase 2: Core conversion engine implementation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 09:21:56 +01:00
"next": "^16.0.0",
refactor: migrate to Tailwind CSS 4 native configuration Convert from Tailwind CSS 3 style to Tailwind CSS 4 native approach: - Install @tailwindcss/postcss plugin - Create postcss.config.mjs with Tailwind PostCSS plugin - Migrate all custom theme colors to globals.css using @theme directive - Remove tailwind.config.ts (no longer needed in Tailwind CSS 4) - Update globals.css from @import style to native CSS with custom properties Custom theme includes: - 23 category-specific colors as CSS custom properties - --color-category-* naming convention for all unit types - Follows Tailwind CSS 4 best practices with @theme block Benefits: - Native CSS features, no JS config needed - Better performance with PostCSS plugin - Cleaner separation of concerns - Follows Tailwind CSS 4 migration guide 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 09:26:11 +01:00
"react": "^19.0.0",
feat: implement Phase 2 - Core conversion engine and UI Complete Phase 2 implementation with working unit converter: Core Conversion Engine (lib/units.ts): - Type-safe wrapper for convert-units library - Support for all 23 measures with TypeScript types - getAllMeasures() - Get all available categories - getUnitsForMeasure() - Get units for specific measure - getUnitInfo() - Get detailed unit information - convertUnit() - Convert between two units - convertToAll() - Convert to all compatible units - getCategoryColor() - Get Tailwind color class for measure - formatMeasureName() - Format measure names for display - searchUnits() - Fuzzy search across all units Utility Functions (lib/utils.ts): - cn() - Merge Tailwind classes with clsx and tailwind-merge - formatNumber() - Smart number formatting with scientific notation - debounce() - Debounce helper for inputs - parseNumberInput() - Parse user input to number - getRelativeTime() - Format timestamps UI Components: - Input - Styled input with focus states - Button - 6 variants (default, destructive, outline, secondary, ghost, link) - Card - Card container with header, title, description, content, footer Main Converter Component (components/converter/MainConverter.tsx): - Real-time conversion as user types - Category selection with 23 color-coded buttons - Input field with unit selector - Grid display of all conversions in selected measure - Color-coded result cards with category colors - Responsive layout (1/2/3 column grid) Homepage Updates: - Integrated MainConverter component - Clean header with gradient text - Uses design system colors Dependencies Added: - clsx - Class name utilities - tailwind-merge - Merge Tailwind classes intelligently Features Working: ✓ Select from 23 measurement categories ✓ Real-time conversion to all compatible units ✓ Color-coded categories ✓ Formatted number display ✓ Responsive design 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 09:34:57 +01:00
"react-dom": "^19.0.0",
"tailwind-merge": "^3.3.1"
feat: initialize Next.js 16 project with TypeScript and Tailwind CSS 4 Set up complete Next.js 16 development environment: - Next.js 16.0.1 with App Router and Turbopack - React 19.2.0 with TypeScript 5.9 - Tailwind CSS 4.1.17 with custom category colors - ESLint 9 with Next.js config - Static site generation enabled (output: 'export') Project structure: - app/ directory with layout, page, and globals.css - Tailwind config with 23 category-specific colors - TypeScript config with strict mode and path aliases - Complete .gitignore for Next.js projects Dependencies installed: - convert-units 2.3.4 for unit conversions - All React 19 and Next.js 16 dependencies - Development tooling (TypeScript, ESLint, Tailwind) Ready for Phase 2: Core conversion engine implementation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 09:21:56 +01:00
},
"devDependencies": {
refactor: migrate to Tailwind CSS 4 native configuration Convert from Tailwind CSS 3 style to Tailwind CSS 4 native approach: - Install @tailwindcss/postcss plugin - Create postcss.config.mjs with Tailwind PostCSS plugin - Migrate all custom theme colors to globals.css using @theme directive - Remove tailwind.config.ts (no longer needed in Tailwind CSS 4) - Update globals.css from @import style to native CSS with custom properties Custom theme includes: - 23 category-specific colors as CSS custom properties - --color-category-* naming convention for all unit types - Follows Tailwind CSS 4 best practices with @theme block Benefits: - Native CSS features, no JS config needed - Better performance with PostCSS plugin - Cleaner separation of concerns - Follows Tailwind CSS 4 migration guide 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 09:26:11 +01:00
"@tailwindcss/postcss": "^4.1.17",
feat: initialize Next.js 16 project with TypeScript and Tailwind CSS 4 Set up complete Next.js 16 development environment: - Next.js 16.0.1 with App Router and Turbopack - React 19.2.0 with TypeScript 5.9 - Tailwind CSS 4.1.17 with custom category colors - ESLint 9 with Next.js config - Static site generation enabled (output: 'export') Project structure: - app/ directory with layout, page, and globals.css - Tailwind config with 23 category-specific colors - TypeScript config with strict mode and path aliases - Complete .gitignore for Next.js projects Dependencies installed: - convert-units 2.3.4 for unit conversions - All React 19 and Next.js 16 dependencies - Development tooling (TypeScript, ESLint, Tailwind) Ready for Phase 2: Core conversion engine implementation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 09:21:56 +01:00
"@types/node": "^22",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
refactor: migrate to Tailwind CSS 4 native configuration Convert from Tailwind CSS 3 style to Tailwind CSS 4 native approach: - Install @tailwindcss/postcss plugin - Create postcss.config.mjs with Tailwind PostCSS plugin - Migrate all custom theme colors to globals.css using @theme directive - Remove tailwind.config.ts (no longer needed in Tailwind CSS 4) - Update globals.css from @import style to native CSS with custom properties Custom theme includes: - 23 category-specific colors as CSS custom properties - --color-category-* naming convention for all unit types - Follows Tailwind CSS 4 best practices with @theme block Benefits: - Native CSS features, no JS config needed - Better performance with PostCSS plugin - Cleaner separation of concerns - Follows Tailwind CSS 4 migration guide 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 09:26:11 +01:00
"eslint-config-next": "^16.0.0",
"tailwindcss": "^4.0.0",
"typescript": "^5"
feat: initialize Next.js 16 project with TypeScript and Tailwind CSS 4 Set up complete Next.js 16 development environment: - Next.js 16.0.1 with App Router and Turbopack - React 19.2.0 with TypeScript 5.9 - Tailwind CSS 4.1.17 with custom category colors - ESLint 9 with Next.js config - Static site generation enabled (output: 'export') Project structure: - app/ directory with layout, page, and globals.css - Tailwind config with 23 category-specific colors - TypeScript config with strict mode and path aliases - Complete .gitignore for Next.js projects Dependencies installed: - convert-units 2.3.4 for unit conversions - All React 19 and Next.js 16 dependencies - Development tooling (TypeScript, ESLint, Tailwind) Ready for Phase 2: Core conversion engine implementation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 09:21:56 +01:00
}
}
Reference in New Issue Copy Permalink