gedeza isutech-web-aurora .cursorrules file for TypeScript

# iSuTech Coding Rules and Best Practices



## Table of Contents
1. [General Guidelines](#general-guidelines)
2. [Code Style](#code-style)
3. [React Best Practices](#react-best-practices)
4. [TypeScript Guidelines](#typescript-guidelines)
5. [State Management](#state-management)
6. [Testing](#testing)
7. [Performance](#performance)
8. [Security](#security)


<!-- > For a quick reference guide to these standards, see [@/Docs/QUICKREFERENCE.md](@/Docs/QUICKREFERENCE.md) -->


## General Guidelines

### File Organization
- One component per file
- Use meaningful file names that reflect the component's purpose
- Group related files in appropriate directories
- Maximum file size should not exceed 400 lines
- Keep components focused and single-responsibility

### Naming Conventions
- Use PascalCase for component names: `UserProfile.tsx`
- Use camelCase for file names of non-components: `useAuth.tsx`
- Use kebab-case for CSS files: `button-styles.css`
- Use descriptive names that indicate functionality

## Code Style

### Formatting
- Use 2 spaces for indentation
- Use semicolons at the end of statements
- Use single quotes for strings
- Add trailing commas in objects and arrays
- Maximum line length: 100 characters

### Comments
- Write self-documenting code
- Add comments for complex logic only
- Use JSDoc for component props and functions
- Keep comments up-to-date with code changes

## React Best Practices

### Components
- Use functional components with hooks
- Keep components small and focused
- Extract reusable logic into custom hooks
- Use proper prop typing with TypeScript
- Implement error boundaries for error handling

### Props
- Use destructuring for props
- Define prop types using TypeScript interfaces
- Provide default props when applicable
- Avoid passing unnecessary props

### Hooks
- Follow hooks rules and naming conventions
- Custom hooks should start with 'use'
- Keep hooks focused on specific functionality
- Memoize values and callbacks when needed

## TypeScript Guidelines

### Types and Interfaces
- Use interfaces for object shapes
- Use type aliases for unions and complex types
- Export types/interfaces when shared
- Use meaningful type names

### Type Safety
- Avoid using 'any' type
- Use strict type checking
- Properly type async operations
- Use generics when appropriate

## State Management

### Local State
- Use useState for simple component state
- Use useReducer for complex state logic
- Keep state as close as possible to where it's used

### Global State
- Use React Query for server state
- Follow object syntax for query configuration
- Implement proper loading and error states
- Use proper caching strategies

## Testing

### Unit Tests
- Write tests for all components
- Test component behavior and user interactions
- Use meaningful test descriptions
- Follow AAA pattern (Arrange, Act, Assert)

### Integration Tests
- Test component integration points
- Verify data flow between components
- Test error handling and edge cases

## Performance

### Optimization
- Use React.memo for expensive components
- Implement code splitting with lazy loading
- Optimize images and assets
- Monitor and optimize bundle size

### Best Practices
- Avoid unnecessary re-renders
- Use proper key props in lists
- Implement proper loading states
- Use performance monitoring tools

## Security

### Data Handling
- Sanitize user input
- Implement proper authentication
- Use HTTPS for API calls
- Follow security best practices

### Error Handling
- Implement proper error boundaries
- Log errors appropriately
- Don't expose sensitive information
- Handle API errors gracefully

## Commit Guidelines

### Commit Messages
- Use conventional commits format
- Write clear and concise messages
- Reference issue numbers when applicable
- Keep commits focused and atomic

### Version Control
- Create feature branches from main
- Keep branches up to date
- Review code before merging
- Delete branches after merging

## Documentation

### Code Documentation
- Document complex logic
- Update README.md when needed
- Document API endpoints
- Keep documentation up to date

### Component Documentation
- Document component props
- Provide usage examples
- Document side effects
- Include accessibility considerations

## Accessibility

### Guidelines
- Use semantic HTML elements
- Implement proper ARIA attributes
- Ensure keyboard navigation
- Test with screen readers

### Best Practices
- Provide alt text for images
- Use proper heading hierarchy
- Implement focus management
- Test color contrast

## CSS/Tailwind Guidelines

### Styling
- Use Tailwind CSS classes
- Follow mobile-first approach
- Maintain consistent spacing
- Use design system tokens

### Best Practices
- Keep styles modular
- Avoid !important
- Use proper responsive classes
- Follow BEM naming for custom CSS

## Code Review

### Process
- Review all code changes
- Provide constructive feedback
- Check for best practices
- Verify documentation

### Checklist
- Code follows style guide
- Tests are included
- Documentation is updated
- Performance is considered
- Security is addressed

Remember: These rules are living guidelines. They should be regularly reviewed and updated based on team feedback and project needs.