nanosistem library-project .cursorrules file for TypeScript

You are an expert in Angular 14, SASS, and TypeScript, focusing on scalable web development.

Key Principles

- Provide clear, precise Angular and TypeScript examples.
- Apply immutability and pure functions where applicable.
- Favor component composition for modularity.
- Use meaningful variable names (e.g., `isActive`, `hasPermission`).
- Use kebab-case for file names (e.g., `user-profile.component.ts`).
- Prefer named exports for components, services, and utilities.

TypeScript & Angular

- Define data structures with interfaces for type safety.
- Avoid `any` type, utilize the type system fully.
- Organize files: imports, definition, implementation.
- Use template strings for multi-line literals.
- Utilize optional chaining and nullish coalescing.
- Use standalone components when applicable.
- Leverage RxJS observables and BehaviorSubjects for efficient state management and reactive programming.
- Implement the OnPush change detection strategy where appropriate to optimize performance.
- Use the `inject` function for injecting services directly within component, directive or service logic, enhancing clarity and reducing boilerplate.

File Naming Conventions

- `*.component.ts` for Components
- `*.service.ts` for Services
- `*.module.ts` for Modules
- `*.directive.ts` for Directives
- `*.pipe.ts` for Pipes
- `*.spec.ts` for Tests
- All files use kebab-case.

Code Style

- Use single quotes for string literals.
- Indent with 2 spaces.
- Ensure clean code with no trailing whitespace.
- Use `const` for immutable variables.
- Use template strings for string interpolation.

Angular-Specific Guidelines

- Use async pipe for observables in templates.
- Implement lazy loading for feature modules.
- Ensure accessibility with semantic HTML and ARIA labels.
- Utilize RxJS operators for efficient data manipulation and state management.
- Implement proper subscription management using takeUntil or other unsubscription strategies.

Import Order

- Angular core and common modules
- RxJS modules
- Other Angular modules
- Application core imports
- Shared module imports
- Environment-specific imports
- Relative path imports

Error Handling and Validation

- Use proper error handling in services and components.
- Use custom error types or factories.
- Implement Angular form validation or custom validators.
- Utilize RxJS catchError for handling observable errors.

Testing

- Follow the Arrange-Act-Assert pattern for tests.
- Use TestBed for component and service testing.
- Implement marble testing for complex observable scenarios.

Performance Optimization

- Optimize ngFor with trackBy functions.
- Use pure pipes for expensive computations.
- Avoid direct DOM manipulation; use Angular's templating system.
- Implement OnPush change detection strategy for performance-critical components.
- Use shareReplay or other sharing operators to minimize redundant observable executions.

Security

- Prevent XSS with Angular's sanitization; avoid using innerHTML.
- Sanitize dynamic content with built-in tools.

Key Conventions

- Use Angular’s DI system and the `inject` function for service injection.
- Focus on reusability and modularity.
- Follow Angular's style guide.
- Optimize with Angular's best practices.
- Focus on optimizing Web Vitals like LCP, INP, and CLS.

RxJS and Reactive Programming

- Prefer BehaviorSubject for state management in services.
- Use distinctUntilChanged to prevent unnecessary emissions.
- Implement proper error handling and completion logic in observables.
- Utilize combineLatest, merge, and other combination operators for complex state derivations.
- Implement proper subscription management to prevent memory leaks.

Reference
Refer to Angular 14's official documentation and RxJS documentation for best practices in Components, Services, Modules, and reactive programming.