XM Cloud Code Quality Agent

Analyze TypeScript quality, JSS component patterns, and React best practices.

Analysis Areas

1. TypeScript Strict Mode

Check for any type usage:

// Bad: Extensive any usage
const processData = (data: any): any => {
  return data.map((item: any) => item.value);
};

// Good: Proper typing
interface DataItem {
  value: string;
}

const processData = (data: DataItem[]): string[] => {
  return data.map(item => item.value);
};

2. JSS Component Patterns

Check for withDatasourceCheck wrapper on data-driven components:

// Bad: No datasource validation
const Hero = ({ fields }: HeroProps) => (
  <div>
    <Text field={fields.heading} />
  </div>
);
export default Hero;

// Good: Datasource check wrapper
const Hero = ({ fields }: HeroProps) => (
  <div>
    <Text field={fields.heading} />
  </div>
);
export default withDatasourceCheck()<HeroProps>(Hero);

3. Field Component Usage

Check for direct field access vs Field components:

// Bad: Direct access loses Experience Editor support
<h1>{fields.heading.value}</h1>

// Good: Field component enables editing
<Text field={fields.heading} tag="h1" />
<RichText field={fields.body} />
<Image field={fields.image} />

4. Error Boundaries

Check for error boundary implementation:

// Good: Error boundary wrapping components
<ErrorBoundary fallback={<ErrorFallback />}>
  <ComponentThatMightFail />
</ErrorBoundary>

5. React Best Practices

Check for:

• useCallback for event handlers passed to children
• useMemo for expensive computations
• React.memo for pure presentational components
• Proper dependency arrays in hooks

// Bad: New function on every render
<Button onClick={() => handleClick(item.id)} />

// Good: Memoized callback
const handleItemClick = useCallback((id: string) => {
  handleClick(id);
}, [handleClick]);

6. Props Typing

Check for proper TypeScript props interfaces:

// Good: Extends ComponentProps for JSS integration
import { ComponentProps } from 'lib/component-props';

interface HeroProps extends ComponentProps {
  fields: {
    heading: Field<string>;
    body: Field<string>;
    image: ImageField;
  };
}

7. Console Statements

Check for console.log in production code:

// Bad: Debug statements in production
console.log('Debug:', data);

// Good: Use proper logging or remove
logger.debug('Processing data', { count: data.length });

8. Import Organization

Check for consistent import ordering:

// Good order:
// 1. React/Next.js
import React from 'react';
import { NextPage } from 'next';

// 2. Third-party libraries
import { motion } from 'framer-motion';

// 3. Sitecore JSS
import { Text, Field } from '@sitecore-jss/sitecore-jss-nextjs';

// 4. Local imports
import { Hero } from 'components/Hero';
import styles from './Page.module.css';

Issues to Detect

Code	Severity	Issue	Detection
CQ-001	Critical	Extensive any type usage	>5 any types in file
CQ-002	Critical	Missing withDatasourceCheck	JSS component without wrapper
CQ-003	Warning	Direct field access	.value access instead of Field component
CQ-004	Warning	Missing error boundaries	No ErrorBoundary in component tree
CQ-005	Warning	Inline styles	style={{}} instead of CSS modules
CQ-006	Info	Missing React.memo	Pure component without memoization
CQ-007	Info	Console statements	console.log in production code
CQ-008	Info	Missing TypeScript strict	strictNullChecks disabled

Analysis Steps

Step 1: TypeScript Configuration

Read: tsconfig.json
Check strict mode settings

Step 2: Scan for Any Types

Grep: : any
Grep: as any
Count occurrences per file

Step 3: Check JSS Components

Glob: **/components/**/*.tsx
For each component:
  Check for withDatasourceCheck export
  Check for Field component usage vs .value

Step 4: Find Console Statements

Grep: console\.(log|debug|info|warn|error)
Exclude test files

Step 5: Check Error Boundaries

Grep: ErrorBoundary
Grep: componentDidCatch
Verify presence in component hierarchy

Output Format

## Code Quality Analysis

### Summary
- **Components Analyzed**: 24
- **TypeScript Strict**: Enabled
- **Code Quality Score**: B+

### Critical Issues

#### [CQ-001] Extensive `any` Type Usage
**Location**: `src/lib/helpers/dataTransform.ts`
**Occurrences**: 12 `any` types
**Code**:
```typescript
export const transform = (data: any): any => {
  return data.items.map((item: any) => ...

Fix: Define proper interfaces for data structures

[CQ-002] Missing withDatasourceCheck

Location: src/components/Hero/Hero.tsx Issue: Component accesses fields without datasource validation Impact: Runtime errors when datasource is missing Fix:

export default withDatasourceCheck()<HeroProps>(Hero);

Warnings

[CQ-003] Direct Field Access

Locations:

• src/components/Card/Card.tsx:15
• src/components/Banner/Banner.tsx:23 Issue: Using fields.title.value instead of <Text field={fields.title} /> Impact: Loses Experience Editor inline editing capability Fix: Use JSS Field components

TypeScript Quality

Metric	Value	Status
Strict Mode	Enabled	Good
Any Types	23	Warning
Type Coverage	87%	Good
Unused Exports	4	Info

Recommendations

1. Replace any types with proper interfaces (23 occurrences)
2. Add withDatasourceCheck to 3 components
3. Replace direct field access in 5 locations
4. Add error boundary wrapper to main layout