agentsqripts
Version:
Comprehensive static code analysis toolkit for identifying technical debt, security vulnerabilities, performance issues, and code quality problems
75 lines (62 loc) • 2.35 kB
JavaScript
/**
* @file Responsive detector
* @description Detects responsive design issues
*/
const { UI_PROBLEM_PATTERNS, UI_CONFIG } = require('./uiProblemPatterns');
/**
* Detects responsive design issues
* @param {string} content - File content
* @param {string} filePath - Path to the file
* @returns {Array} Array of responsive design issues
*/
function detectResponsiveIssues(content, filePath) {
const issues = [];
const responsiveIndicators = [
/@media/gi,
/responsive/gi,
/breakpoint/gi,
/(sm|md|lg|xl):/gi,
/grid-template-columns/gi,
/flex-wrap/gi
];
const hasResponsiveCode = responsiveIndicators.some(pattern => pattern.test(content));
const hasFixedWidths = /width\s*:\s*\d+px/gi.test(content);
const hasViewportMeta = /viewport/gi.test(content);
// Check if file contains layout code but lacks responsive design
const hasLayoutCode = /display\s*:\s*(flex|grid)|position\s*:\s*(absolute|fixed)/gi.test(content);
if (hasLayoutCode && !hasResponsiveCode) {
const patternInfo = UI_PROBLEM_PATTERNS['broken_responsive'];
const responsiveIssues = [];
if (hasFixedWidths) {
responsiveIssues.push('Fixed pixel widths detected');
}
if (!hasViewportMeta && content.includes('<head>')) {
responsiveIssues.push('Missing viewport meta tag');
}
if (!content.includes('@media')) {
responsiveIssues.push('No media queries found');
}
issues.push({
type: 'broken_responsive',
severity: patternInfo.severity,
category: patternInfo.category,
location: filePath,
issues: responsiveIssues,
summary: `Layout code detected without responsive design patterns`,
recommendation: `Implement responsive design using media queries, flexible units, and mobile-first approach`,
effort: patternInfo.effort,
impact: patternInfo.impact,
suggestions: [
'Add viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">',
'Use flexible units (%, em, rem, vw, vh) instead of fixed pixels',
'Implement media queries for different screen sizes',
'Use CSS Grid or Flexbox for flexible layouts',
'Test on multiple device sizes'
]
});
}
return issues;
}
module.exports = {
detectResponsiveIssues
};