Conversation
- Add form-component-patterns.mdc: Remix Hook Form + Zod integration patterns - Add react-typescript-patterns.mdc: Component architecture and TypeScript best practices - Add ui-component-patterns.mdc: Radix UI + Tailwind CSS + CVA patterns - Add monorepo-organization.mdc: Import conventions and package structure These rules complement the existing Storybook testing rules and provide comprehensive guidance for consistent development patterns across the lambda-curry/forms component library.
|
|
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Join our Discord community for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Contributor
|
📝 Storybook Preview: View Storybook This preview will be updated automatically when you push new changes to this PR.
|
…ctices - Update react-typescript-patterns.mdc: Remove forwardRef patterns, add React 19 ref handling, use() hook for async operations, and ref cleanup functions - Update ui-component-patterns.mdc: Add Tailwind 4 features (CSS custom properties, container queries, modern CSS functions), ShadCN UI component architecture, and performance optimizations These updates ensure the cursor rules reflect the latest best practices for React 19, Tailwind CSS 4, and ShadCN UI patterns.
jaruesink
requested changes
May 26, 2025
Comment on lines
+150
to
+217
| // Framer Motion integration | ||
| import { motion } from 'framer-motion'; | ||
|
|
||
| const MotionCard = motion.div; | ||
|
|
||
| const cardAnimation = { | ||
| initial: { opacity: 0, y: 20 }, | ||
| animate: { opacity: 1, y: 0 }, | ||
| exit: { opacity: 0, y: -20 }, | ||
| transition: { duration: 0.2 }, | ||
| }; | ||
| ``` | ||
|
|
||
| ## Accessibility Patterns | ||
| ```typescript | ||
| // ARIA patterns | ||
| const Button = ({ children, ...props }: ButtonProps) => ( | ||
| <button | ||
| type="button" | ||
| role="button" | ||
| aria-pressed={pressed} | ||
| aria-expanded={expanded} | ||
| aria-describedby={describedBy} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </button> | ||
| ); | ||
|
|
||
| // Focus management | ||
| const useFocusTrap = (isOpen: boolean) => { | ||
| const containerRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| useEffect(() => { | ||
| if (!isOpen) return; | ||
|
|
||
| const container = containerRef.current; | ||
| if (!container) return; | ||
|
|
||
| const focusableElements = container.querySelectorAll( | ||
| 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' | ||
| ); | ||
|
|
||
| const firstElement = focusableElements[0] as HTMLElement; | ||
| const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement; | ||
|
|
||
| firstElement?.focus(); | ||
|
|
||
| const handleTabKey = (e: KeyboardEvent) => { | ||
| if (e.key !== 'Tab') return; | ||
|
|
||
| if (e.shiftKey) { | ||
| if (document.activeElement === firstElement) { | ||
| lastElement?.focus(); | ||
| e.preventDefault(); | ||
| } | ||
| } else { | ||
| if (document.activeElement === lastElement) { | ||
| firstElement?.focus(); | ||
| e.preventDefault(); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| container.addEventListener('keydown', handleTabKey); | ||
| return () => container.removeEventListener('keydown', handleTabKey); | ||
| }, [isOpen]); | ||
|
|
Contributor
There was a problem hiding this comment.
@codegen-sh Let's remove this, we don't have framer-motion in the project. We also utilize shadcn components (which radix-ui). Let's make sure we're not adding to much context for things that aren't already in our repo.
Contributor
Author
There was a problem hiding this comment.
Got it! I'll remove the framer-motion references and ensure we're only using shadcn/radix-ui components. 🧹
Contributor
Author
There was a problem hiding this comment.
✅ Perfect! I've cleaned up the cursor rules to focus specifically on your project! 🧹
🎯 Removed Unnecessary Context
What I Removed:
- ❌ Framer Motion references - not used in your project
- ❌ Generic ShadCN UI examples - replaced with your actual component patterns
- ❌ Unnecessary animation libraries - focused on CSS-only animations
- ❌ Generic component examples - replaced with your actual components
What I Focused On:
- ✅ Your actual Radix UI components - Alert Dialog, Avatar, Checkbox, Dialog, Dropdown Menu, Label, Popover, Radio Group, Scroll Area, Separator, Slot, Switch, Tooltip
- ✅ Your existing UI components - Badge, Button, Checkbox Field, Command, Data Table, Date Picker, Form components, OTP Input, etc.
- ✅ Your project architecture - Based on your actual
button.tsx,form.tsx,table.tsx,dropdown-menu.tsxpatterns - ✅ Your dependencies - Tailwind CSS 4, React 19, @tanstack/react-table, lucide-react, etc.
🔧 Now Provides Focused Guidance For:
- Component patterns that match your existing architecture
- Form integration with your actual form components
- Data table patterns based on your @tanstack/react-table usage
- Radix UI integration for only the components you actually use
- Tailwind 4 features without unnecessary complexity
The cursor rules are now laser-focused on the lambda-curry/forms component library and will provide AI assistance that's directly relevant to your actual codebase! 🎨
🔗 Updated PR #72 - Ready for review!
💻 View my work • React 👍 or 👎
- Remove framer-motion references (not used in project) - Focus UI patterns on actual Radix UI components in use - Base examples on existing components (button.tsx, form.tsx, table.tsx, etc.) - Remove generic ShadCN references, focus on lambda-curry/forms architecture - Streamline patterns to match actual project dependencies and structure The cursor rules now provide focused guidance only for components and patterns that exist in the lambda-curry/forms repository.
codegen-sh
Bot
force-pushed
the
codegen-bot/cursor-rules-implementation-1748117239
branch
from
b363975 to
644f914
Compare
jaruesink
requested changes
May 26, 2025
| }; | ||
| ``` | ||
|
|
||
| ## Form Component Patterns (Based on Your form.tsx) |
Contributor
There was a problem hiding this comment.
let's get rid of the "## Form Component Patterns (Based on Your form.tsx)" section in this ui-component-patterns file because we already have another form-components-patterns cursor rule file.
| export { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage }; | ||
| ``` | ||
|
|
||
| ## Data Table Patterns (Based on Your data-table Components) |
Contributor
There was a problem hiding this comment.
let's get rid of the "## Data Table Patterns (Based on Your data-table Components)" section because it's not needed in a cursor rule
| }); | ||
| ``` | ||
|
|
||
| ## Testing Integration |
Contributor
There was a problem hiding this comment.
let's get rid of our testing integration section in this file because we already have a testing rule
Contributor
Author
|
Understood! I'll update the file to remove those sections. ✂️ |
- Remove Form Component Patterns section (already covered in form-component-patterns.mdc) - Remove Data Table Patterns section (not needed in cursor rules) - Remove Testing Integration section (already covered in storybook-testing.mdc) The UI component patterns file now focuses solely on UI-specific patterns: - Radix UI integration patterns - Tailwind CSS 4 features - Component architecture - Responsive design - Animations - Accessibility - Performance optimization This eliminates duplication and keeps each cursor rule file focused on its specific domain.
Contributor
Author
|
✅ Perfect! I've cleaned up the UI component patterns file by removing all the duplicate sections! 🧹 🗑️ Removed Duplicate Sections:❌ Form Component Patterns
❌ Data Table Patterns
❌ Testing Integration
✅ UI Component Patterns Now Focuses On:
Each cursor rule file now has a clear, focused domain with no overlap! This will give you much cleaner AI assistance that doesn't repeat guidance across different files. 🎯 🔗 Updated PR #72 - Ready for review! 💻 View my work • React 👍 or 👎 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
This PR adds four comprehensive cursor rules that complement the existing Storybook testing rules, providing AI-optimized guidance for consistent development patterns across the lambda-curry/forms component library.
🎯 New Cursor Rules Added
1. Form Component Integration Patterns (
.cursor/rules/form-component-patterns.mdc)2. React + TypeScript Component Architecture (
.cursor/rules/react-typescript-patterns.mdc)3. UI Component Patterns (
.cursor/rules/ui-component-patterns.mdc)4. Monorepo Organization (
.cursor/rules/monorepo-organization.mdc)@lambdacurry/forms/remix-hook-form/vs relative)🔥 Key Benefits
Consistency Across Development
Enhanced Developer Experience
Technical Excellence
📚 Integration with Existing Patterns
These rules are designed to work seamlessly with:
🚀 Immediate Impact
Developers using Cursor IDE will now receive intelligent guidance for:
📁 File Structure
🎨 Modern Cursor Rules Directory Pattern
Following the latest Cursor best practices:
.cursor/rules/directory structure (Jan 2025 pattern)type: Always)This comprehensive set of cursor rules will significantly enhance the development experience and ensure consistent, high-quality code across the entire lambda-curry/forms component library! 🎯
Summary of Changes:
💻 View my work • About Codegen