88 lines
2.3 KiB
Plaintext
88 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
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|