91 lines
2.3 KiB
Plaintext
91 lines
2.3 KiB
Plaintext
# Cursor Rules for PWA React App
|
|
|
|
## Component Development Guidelines
|
|
|
|
### Structure
|
|
- Use functional components with TypeScript
|
|
- Follow the folder structure: components should be in `src/components/`
|
|
- Use PascalCase for component names
|
|
- Create separate files for each component
|
|
|
|
### Code Style
|
|
- Use TypeScript for type safety
|
|
- Use functional components with hooks
|
|
- Prefer named exports for components
|
|
- Use arrow functions for component definitions
|
|
- Keep components small and focused (single responsibility)
|
|
|
|
### Styling
|
|
- Use Tailwind CSS classes for styling
|
|
- Use `cn()` utility from `@/lib/utils` for conditional classes
|
|
- Prefer shadcn/ui components when available
|
|
- Use CSS variables for theming (defined in globals.css)
|
|
- Support RTL direction (Persian)
|
|
|
|
### State Management
|
|
- Use Jotai atoms for global state (in `src/atoms/`)
|
|
- Use React hooks (useState, useEffect) for local component state
|
|
- Custom hooks should be in `src/hooks/`
|
|
|
|
### API & Services
|
|
- All Supabase calls should go through `src/services/supabase.ts`
|
|
- Create custom hooks for data fetching (e.g., `useRequests`, `useChat`)
|
|
- Handle loading and error states
|
|
|
|
### Routing
|
|
- Use React Router v6+
|
|
- Use lazy loading for route components
|
|
- Wrap protected routes with `<ProtectedRoute>` component
|
|
- Use `useNavigate` for programmatic navigation
|
|
|
|
### Forms
|
|
- Use controlled components with useState
|
|
- Validate inputs before submission
|
|
- Show error messages with Toast notifications
|
|
- Disable submit button during loading
|
|
|
|
### Accessibility
|
|
- Use semantic HTML elements
|
|
- Add proper labels for form inputs
|
|
- Ensure keyboard navigation works
|
|
- Use ARIA attributes when needed
|
|
|
|
### Performance
|
|
- Use React.memo for expensive components when needed
|
|
- Implement lazy loading for routes
|
|
- Optimize images and assets
|
|
- Use Suspense boundaries
|
|
|
|
### TypeScript
|
|
- Define types for all props
|
|
- Use interfaces for object types
|
|
- Avoid `any` type, use `unknown` if needed
|
|
- Export types from service files
|
|
|
|
### File Organization
|
|
- Keep related files together
|
|
- Use index files for clean imports when appropriate
|
|
- Separate concerns (UI, logic, data)
|
|
|
|
### Best Practices
|
|
- Always handle async operations with try/catch
|
|
- Show loading states during async operations
|
|
- Provide user feedback with Toast notifications
|
|
- Clean up subscriptions and effects properly
|
|
- Use meaningful variable and function names in Persian context
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|