Merge pull request #657 from aXenDeveloper/dynamic-options-select

feat: Add combobox async

Author: aXenDeveloper

.github/copilot-instructions.md

@@ -1,26 +1,32 @@
 # VitNode Development Guidelines
 
-VitNode is a comprehensive framework designed to simplify and accelerate application development with Next.js and Hono.js. Built as a monorepo solution managed by Turborepo, VitNode provides a structured environment that makes development faster and less complex. The framework includes an integrated AdminCP and plugin system to extend its core functionality.
+VitNode is a comprehensive framework designed to simplify and accelerate application development with Next.js and Hono.js. Built as a monorepo solution managed by Turborepo, VitNode provides a structured environment that makes development faster and less complex. The framework includes an integrated AdminCP, plugin system, authentication, role management, and comprehensive developer tools.
 
 ## Global Rules
 
 - Write ESModule only
 - Always use snake_case for file names
 - Use pnpm as package manager
-- Use Zod 3 for schema validation
+- Use Zod 3 for schema validation and runtime validation
 - Use react-hook-form 7 for forms
 - Use Shadcn UI & Tailwind CSS 4 for UI
 - Respect Prettier configuration in `packages/eslint/prettierrc.mjs` and ESLint configuration in `packages/eslint/eslint.config.mjs`
-- Use TypeScript 5, React 19 & Hono.js 4
+- Use TypeScript 5 with strict configuration, React 19 & Hono.js 4
+- Follow WCAG 2.1 AA compliance for accessibility
+- Aim for Lighthouse scores of 95+ and Core Web Vitals optimization
+- Implement proper error handling and validation at all levels
 
 ## Frontend Development (Next.js & React)
 
-- Use Next.js 15
-- Use App Router and Server Components
+- Use Next.js 15 with App Router and Server Components
 - Use server actions for form handling and data mutations from Server Components
 - Leverage Next.js Image component with proper sizing for core web vitals optimization
 - Navigation API is in `vitnode/lib/navigation` file. Avoid using `next/navigation` directly
 - Alert Dialog & Dialog content should always have title and description with React lazy loading content
+- Implement dark/light mode support with system preference detection
+- Ensure keyboard navigation support and screen reader compatibility
+- Use proper semantic HTML and ARIA attributes
+- Use XSS protection with content security policy
 
 ### Internationalization (i18n)
 
@@ -30,10 +36,16 @@ VitNode is a comprehensive framework designed to simplify and accelerate applica
 
 ## Backend Development (Hono.js)
 
-- Use @hono/zod-openapi or Zod 3 for schema validation
-- Use PostgreSQL with Drizzle ORM
+- Use @hono/zod-openapi or Zod 3 for schema validation and OpenAPI documentation
+- Use PostgreSQL with Drizzle ORM for database operations
 - Use `t.serial().primaryKey()` for all database IDs
 - To get access to database, use `c.get('database')` by Hono.js context
+- Implement rate limiting on API endpoints, especially authentication
+- Use secure session management with configurable duration
+- Implement proper error handling and logging
+- Follow RESTful API design principles
+- Support API versioning with backward compatibility
+- Include comprehensive OpenAPI 3.0 specifications
 
 ## Documentation (\*.mdx files)
 

.github/docs/prd.md

@@ -24,119 +24,261 @@ VitNode is designed for individual developers and small teams who need a structu
 
 ### Structure and Configuration
 
-- Monorepo structure using Turborepo with `apps` and `plugins` directories
-- Simple CLI tool for creating new projects (`create-vitnode-app`)
-- Script to set up PostgreSQL database with initial data (roles, languages, etc.)
-- Internationalization (i18n) support using next-intl (RTL not required for MVP)
-- Dark/Light mode support
+- Monorepo structure using Turborepo with `apps`, `packages`, and `plugins` directories
+- CLI tool for creating new projects (`create-vitnode-app`)
+- Database migration system using Drizzle ORM with PostgreSQL
+- Internationalization (i18n) support using next-intl
+- Dark/Light mode support with system preference detection
+- Environment-based configuration management
 
 ### Plugin System
 
-- Monorepo-based plugin architecture created using `npx create-vitnode-app@canary --plugin`
+- Monorepo-based plugin architecture with standardized structure
 - Plugins can extend functionality by creating:
-  - New pages and routes
-  - API endpoints
-  - AdminCP pages
-  - SSO providers
-  - Email providers (SMTP, Resend)
+  - New pages and routes with automatic navigation integration
+  - API endpoints with OpenAPI documentation
+  - AdminCP pages with role-based access control
+  - Database schema extensions with automatic migrations
+  - Custom UI components and layouts
+  - Email providers (SMTP, Resend, custom)
+- Plugin hooks and events system for inter-plugin communication
 
 ### CI/CD
 
 - Automated workflows using GitHub Actions:
-  - Code quality checks (linting, formatting)
-  - Test suite execution on pull requests and main branch
-  - Dependency security scanning
-  - Automated builds and deployments to staging/production environments
-  - Version tagging and changelog generation
-  - Docker image building and publishing
+  - Code quality checks (ESLint, Prettier, TypeScript)
+  - Test suite execution with Vitest and Playwright
+  - Dependency security scanning with npm audit
+  - Automated builds and deployments to Vercel
   - Database schema validation and migration checks
+  - Automated changelog generation and release notes
 
 ### Authentication & Authorization
 
-- Authentication via credentials and SSO (Facebook, Google, GitHub)
-- User registration and login functionality
-- Password reset and email verification
-- Session management in cookies and database:
-  - 3 months for users
-  - 24 hours for admins
-  - No session storage for guests
-- Security features including password hashing, secure cookies, and protection against CSRF and XSS
+- Multi-provider authentication system:
+  - Credentials (email/password) with hashing
+  - OAuth providers (Google, GitHub, Facebook, Discord)
+- User registration with email verification
+- Password reset with secure token generation
+- Two-factor authentication (TOTP)
+- Session management with secure cookies:
+  - Configurable session duration per user group
+  - Automatic session cleanup
+  - Cross-device session management
+- Security features:
+  - CSRF protection with double-submit cookies
+  - XSS protection with content security policy
+  - Rate limiting on authentication endpoints
+  - Account lockout after failed attempts
 
 ### Role Management
 
-- AdminCP interface for role CRUD operations
-- Role assignment to users
-- Role-based permission system with capabilities defined in the database
-- Permissions enforced through middleware in API and AdminCP
+- Hierarchical role system with inheritance
+- AdminCP interface for comprehensive role management:
+  - Role CRUD operations with validation
+  - Permission matrix with granular controls
+  - Bulk role assignment and management
+- Dynamic permission system:
+  - Resource-based permissions (read, write, delete, admin)
+  - Context-aware permissions (own content vs. all content)
+  - Plugin-defined custom permissions
+- Role-based middleware for API and page protection
 
 ### User Management
 
-- AdminCP interface for user CRUD operations
-- Search and filter functionality for users
-- User profile editing (password, email, avatar, role assignment)
+- Comprehensive user administration:
+  - Advanced search and filtering (by role, status, registration date)
+  - Bulk operations (role assignment, status changes, deletion)
+  - User activity tracking and audit logs
+  - Profile management with avatar uploads
+- User groups and organization support
+- Flexible user profile fields with custom validation
 
 ### API and Documentation
 
-- OpenAPI documentation for all API endpoints
-- API versioning support (core functionality handled by framework, plugins can implement multiple versions)
-- Comprehensive documentation using Fumadocs
-- Documentation structured by feature with examples and best practices
+- Full OpenAPI 3.0 specification with Swagger UI
+- API versioning with backward compatibility
+- Comprehensive documentation using Fumadocs:
+  - Interactive examples with code snippets
+  - Plugin development guides
+  - Deployment instructions
+  - Best practices and patterns
+- Type-safe API client generation
 
 ### Developer Tools
 
-- Integration with Next.js and Hono.js debugging tools
-- Support for react-scan for component debugging
-- Helper functions for form handling, API calls, and routing
-- Clear error messages and debugging guidance
+- Integrated development environment:
+  - Hot reload for both frontend and backend
+  - Database query logging and profiling
+  - API request/response logging
+  - Performance monitoring with Core Web Vitals
+- Debugging tools:
+  - React Developer Tools integration
+  - Database query inspector
+  - Authentication flow debugger
+- Code generation tools:
+  - Component scaffolding
+  - API endpoint generation
+  - Database schema generation from models
+
+### File Management
+
+- Configurable file upload system:
+  - Local filesystem storage
+  - Cloud storage providers (AWS S3, Google Cloud, Azure)
+  - Image processing and optimization
+  - File type validation and security scanning
+- Media library with organization features
+- CDN integration for optimal performance
+
+### Content Management
+
+- Flexible content types with custom fields
+- WYSIWYG editor with plugin support
+- Content versioning and revision history
+- Workflow management (draft, review, published)
+- SEO optimization tools
+
+## Technical Architecture
+
+### Frontend Stack
+
+- Next.js 15 with App Router
+- React 19 with Server Components
+- TypeScript 5 with strict configuration
+- Tailwind CSS 4 with Shadcn UI components
+- Zod 3 for runtime validation
+- React Hook Form 7 for form management
+- Next-intl for internationalization
+
+### Backend Stack
+
+- Hono.js 4 for API development
+- Drizzle ORM with PostgreSQL
+- Zod OpenAPI for API documentation
+
+### Development Tools
+
+- Turborepo for monorepo management
+- Vitest for unit testing
+- Playwright for end-to-end testing
+- ESLint and Prettier for code quality
+- Docker for containerization
 
 ## Features Planned for Future Releases
 
-The following features are not included in the MVP but will be available in future iterations:
+The following features are planned for upcoming releases:
 
-- File uploads
-- WYSIWYG editor
-- WebSockets
-- Caching
-- Rate limiting
-- Additional analytics features
+- WebSocket support for real-time features
+- Advanced caching strategies (Redis, Memcached)
+- Enhanced rate limiting with Redis backend
+- Advanced analytics and reporting
+- Marketplace for community plugins
+- Multi-tenant architecture support
+- Advanced workflow automation
+- AI-powered features (content generation, smart suggestions)
 
 ## Success Criteria
 
 ### Developer Experience
 
-- Developers should be able to easily create and manage applications using the VitNode framework
-- Measured by user feedback and time taken to create CRUD operations, forms, and plugins
-- Positive user feedback regarding ease of use and framework utility
+- Developers should create a basic CRUD application within 30 minutes
+- Plugin development should take less than 2 hours for basic functionality
+- Framework adoption measured by:
+  - GitHub stars and community engagement
+  - Plugin ecosystem growth
+  - Developer feedback scores (target: 4.5/5)
 
 ### Performance
 
-- Complex pages should have a score of 90+ in Lighthouse
-- Achieved through code splitting, lazy loading, image optimization, and static page generation with suspense
+- Lighthouse scores of 95+ for all generated pages
+- Time to First Byte (TTFB) under 200ms
+- Largest Contentful Paint (LCP) under 1.5 seconds
+- Cumulative Layout Shift (CLS) under 0.1
 
 ### Accessibility
 
-- UI should be accessible and follow WCAG 2.1 guidelines
-- Components should be properly labeled and compatible with screen readers
+- WCAG 2.1 AA compliance for all UI components
+- Screen reader compatibility testing
+- Keyboard navigation support
+- Color contrast ratios meeting accessibility standards
 
 ### Deployment
 
-- VitNode should deploy applications with minimal configuration to:
-  - Vercel (serverless) with Supabase (PostgreSQL)
-  - Docker (self-hosted)
+- One-click deployment to major platforms:
+  - Vercel with Supabase/PlanetScale
+  - AWS with RDS
+  - Google Cloud Platform
+  - Self-hosted with Docker Compose
+- Deployment time under 5 minutes for basic applications
 
 ### Documentation
 
-- Complete and up-to-date documentation for all framework features
-- Positive user feedback on documentation quality and usefulness
-- Effective examples and best practices to facilitate framework usage
+- Complete API documentation with interactive examples
+- Step-by-step tutorials for common use cases
+- Video tutorials for complex features
+- Community-contributed examples and patterns
+- Documentation satisfaction score of 4.7/5
 
 ## Developer Workflow
 
-The ideal developer workflow includes:
+The recommended developer workflow:
 
-1. `npx create-vitnode-app` to create a new project
-2. `npm install` to install dependencies
-3. `npm run docker:dev` to start database in Docker
-4. `npm run dev` to start the development server
-5. `npm run build` to build the application for production
-6. `npm run start` to start the production server
+1. **Project Creation**
+
+   ```bash
+   npx create-vitnode-app@latest my-app
+   cd my-app
+   ```
+
+2. **Development Setup**
+
+   ```bash
+   pnpm install
+   pnpm db:push    # Set up database schema
+   pnpm db:seed    # Populate with initial data
+   ```
+
+3. **Development**
+
+   ```bash
+   pnpm dev        # Start development servers
+   pnpm dev:docs   # Start documentation server
+   ```
+
+4. **Plugin Development**
+
+   ```bash
+   pnpm create:plugin my-plugin
+   cd plugins/my-plugin
+   pnpm dev
+   ```
+
+5. **Testing**
+
+   ```bash
+   pnpm test       # Run unit tests
+   pnpm test:e2e   # Run end-to-end tests
+   pnpm test:coverage # Generate coverage report
+   ```
+
+6. **Production Build**
+
+   ```bash
+   pnpm build      # Build all applications
+   pnpm start      # Start production server
+   ```
+
+7. **Deployment**
+   ```bash
+   pnpm deploy     # Deploy to configured platform
+   ```
+
+## Quality Assurance
+
+- Automated testing pipeline with 90%+ code coverage
+- Performance monitoring with automated alerts
+- Security scanning with dependency vulnerability checks
+- Accessibility testing with automated tools
+- Cross-browser compatibility testing
+- Load testing for high-traffic scenarios