superset-frontend/scripts/check-custom-rules.js - superset - Git at Google

 #!/usr/bin/env node
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
  * regarding copyright ownership.  The ASF licenses this file
  * to you under the Apache License, Version 2.0 (the
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
  *
  *   http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  * KIND, either express or implied.  See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */

 /**
  * Custom rule checker for Superset-specific linting patterns
  * Runs as a separate check without needing custom binaries
  */

 const fs = require('fs');
 const path = require('path');
 const glob = require('glob');
 const parser = require('@babel/parser');
 const traverse = require('@babel/traverse').default;

 // ANSI color codes
 const RED = '\x1b[31m';
 const YELLOW = '\x1b[33m';
 const RESET = '\x1b[0m';

 let errorCount = 0;
 let warningCount = 0;

 /**
  * Check if a node has an eslint-disable comment
  */
 function hasEslintDisable(path, ruleName = 'theme-colors/no-literal-colors') {
   const { node, parent } = path;

   // Check leadingComments on the node itself
   if (node.leadingComments) {
     const hasDisable = node.leadingComments.some(
       comment =>
         (comment.value.includes('eslint-disable-next-line') ||
           comment.value.includes('eslint-disable')) &&
         comment.value.includes(ruleName),
     );
     if (hasDisable) return true;
   }

   // Check leadingComments on parent nodes (for expressions in assignments, etc.)
   if (parent && parent.leadingComments) {
     const hasDisable = parent.leadingComments.some(
       comment =>
         (comment.value.includes('eslint-disable-next-line') ||
           comment.value.includes('eslint-disable')) &&
         comment.value.includes(ruleName),
     );
     if (hasDisable) return true;
   }

   // Check if parent is a statement with leading comments
   let current = path;
   while (current.parent) {
     current = current.parent;
     if (current.node && current.node.leadingComments) {
       const hasDisable = current.node.leadingComments.some(
         comment =>
           (comment.value.includes('eslint-disable-next-line') ||
             comment.value.includes('eslint-disable')) &&
           comment.value.includes(ruleName),
       );
       if (hasDisable) return true;
     }
   }

   return false;
 }

 /**
  * Check for literal color values (hex, rgb, rgba)
  */
 function checkNoLiteralColors(ast, filepath) {
   const colorPatterns = [
     /^#[0-9A-Fa-f]{3,6}$/, // Hex colors
     /^rgb\(/, // RGB colors
     /^rgba\(/, // RGBA colors
   ];

   traverse(ast, {
     StringLiteral(path) {
       const { value } = path.node;
       if (colorPatterns.some(pattern => pattern.test(value))) {
         // Check if this line has an eslint-disable comment
         if (hasEslintDisable(path)) {
           return; // Skip this violation
         }

         // eslint-disable-next-line no-console
         console.error(
           `${RED}✖${RESET} ${filepath}: Literal color "${value}" found. Use theme colors instead.`,
         );
         errorCount += 1;
       }
     },
     // Check styled-components template literals
     TemplateLiteral(path) {
       path.node.quasis.forEach(quasi => {
         const value = quasi.value.raw;
         // Look for CSS color properties
         if (
           value.match(
             /(?:color|background|border-color|outline-color):\s*(#[0-9A-Fa-f]{3,6}|rgb|rgba)/,
           )
         ) {
           // Check if this line has an eslint-disable comment
           if (hasEslintDisable(path)) {
             return; // Skip this violation
           }

           // eslint-disable-next-line no-console
           console.error(
             `${RED}✖${RESET} ${filepath}: Literal color in styled component. Use theme colors instead.`,
           );
           errorCount += 1;
         }
       });
     },
   });
 }

 /**
  * Check for FontAwesome icon usage
  */
 function checkNoFaIcons(ast, filepath) {
   traverse(ast, {
     ImportDeclaration(path) {
       const source = path.node.source.value;
       if (source.includes('@fortawesome') || source.includes('font-awesome')) {
         // eslint-disable-next-line no-console
         console.error(
           `${RED}✖${RESET} ${filepath}: FontAwesome import detected. Use @superset-ui/core/components/Icons instead.`,
         );
         errorCount += 1;
       }
     },
     JSXAttribute(path) {
       if (path.node.name.name === 'className') {
         const { value } = path.node;
         if (
           value &&
           value.type === 'StringLiteral' &&
           value.value.includes('fa-')
         ) {
           // eslint-disable-next-line no-console
           console.error(
             `${RED}✖${RESET} ${filepath}: FontAwesome class detected. Use Icons component instead.`,
           );
           errorCount += 1;
         }
       }
     },
   });
 }

 /**
  * Check for improper i18n template usage
  */
 function checkI18nTemplates(ast, filepath) {
   traverse(ast, {
     CallExpression(path) {
       const { callee } = path.node;
       // Check for t() or tn() functions
       if (
         callee.type === 'Identifier' &&
         (callee.name === 't' || callee.name === 'tn')
       ) {
         const args = path.node.arguments;
         if (args.length > 0 && args[0].type === 'TemplateLiteral') {
           const templateLiteral = args[0];
           if (templateLiteral.expressions.length > 0) {
             // eslint-disable-next-line no-console
             console.error(
               `${RED}✖${RESET} ${filepath}: Template variables in t() function. Use parameterized messages instead.`,
             );
             errorCount += 1;
           }
         }
       }
     },
   });
 }

 /**
  * Process a single file
  */
 function processFile(filepath) {
   const code = fs.readFileSync(filepath, 'utf8');

   try {
     const ast = parser.parse(code, {
       sourceType: 'module',
       plugins: ['jsx', 'typescript', 'decorators-legacy'],
       attachComments: true,
     });

     // Run all checks
     checkNoLiteralColors(ast, filepath);
     checkNoFaIcons(ast, filepath);
     checkI18nTemplates(ast, filepath);
   } catch (error) {
     // eslint-disable-next-line no-console
     console.warn(
       `${YELLOW}⚠${RESET} Could not parse ${filepath}: ${error.message}`,
     );
     warningCount += 1;
   }
 }

 /**
  * Main function
  */
 function main() {
   const args = process.argv.slice(2);
   let files = args;

   // Define ignore patterns once
   const ignorePatterns = [
     /\.test\./,
     /\.spec\./,
     /\/test\//,
     /\/tests\//,
     /\/storybook\//,
     /\.stories\./,
     /\/demo\//,
     /\/examples\//,
     /\/color\/colorSchemes\//,
     /\/cypress\//,
     /\/cypress-base\//,
     /packages\/superset-ui-demo\//,
     /\/esm\//,
     /\/lib\//,
     /\/dist\//,
     /plugins\/legacy-/, // Legacy plugins can have old color patterns
     /\/vendor\//, // Third-party vendor code
     /spec\/fixtures\//, // Test fixtures
     /theme\/exampleThemes/, // Theme examples legitimately have colors
     /\/color\/utils/, // Color utility functions legitimately work with colors
     /\/theme\/utils/, // Theme utility functions legitimately work with colors
     /packages\/superset-ui-core\/src\/color\/index\.ts/, // Core brand color constants
   ];

   // If no files specified, check all
   if (files.length === 0) {
     files = glob.sync('src/**/*.{ts,tsx,js,jsx}', {
       ignore: [
         '**/*.test.*',
         '**/*.spec.*',
         '**/test/**',
         '**/tests/**',
         '**/node_modules/**',
         '**/storybook/**',
         '**/*.stories.*',
         '**/demo/**',
         '**/examples/**',
         '**/color/colorSchemes/**', // Color scheme definitions legitimately contain colors
         '**/cypress/**',
         '**/cypress-base/**',
         'packages/superset-ui-demo/**', // Demo package
         '**/esm/**', // Build artifacts
         '**/lib/**', // Build artifacts
         '**/dist/**', // Build artifacts
         'plugins/legacy-*/**', // Legacy plugins
         '**/vendor/**',
         'spec/fixtures/**',
         '**/theme/exampleThemes/**',
         '**/color/utils/**',
         '**/theme/utils/**',
         'packages/superset-ui-core/src/color/index.ts', // Core brand color constants
       ],
     });
   } else {
     // Filter to only JS/TS files and remove superset-frontend prefix
     files = files
       .filter(f => /\.(ts|tsx|js|jsx)$/.test(f))
       .map(f => f.replace(/^superset-frontend\//, ''))
       .filter(f => !ignorePatterns.some(pattern => pattern.test(f)));
   }

   if (files.length === 0) {
     // eslint-disable-next-line no-console
     console.log('No files to check.');
     return;
   }

   // eslint-disable-next-line no-console
   console.log(`Checking ${files.length} files for Superset custom rules...\\n`);

   files.forEach(file => {
     // Resolve the file path
     const resolvedPath = path.resolve(file);
     if (fs.existsSync(resolvedPath)) {
       processFile(resolvedPath);
     } else if (fs.existsSync(file)) {
       processFile(file);
     }
   });

   // eslint-disable-next-line no-console
   console.log(`\\n${errorCount} errors, ${warningCount} warnings`);

   if (errorCount > 0) {
     process.exit(1);
   }
 }

 // Run if called directly
 if (require.main === module) {
   main();
 }

 module.exports = { checkNoLiteralColors, checkNoFaIcons, checkI18nTemplates };
	#!/usr/bin/env node
	/**
	* Licensed to the Apache Software Foundation (ASF) under one
	* or more contributor license agreements. See the NOTICE file
	* distributed with this work for additional information
	* regarding copyright ownership. The ASF licenses this file
	* to you under the Apache License, Version 2.0 (the
	* "License"); you may not use this file except in compliance
	* with the License. You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing,
	* software distributed under the License is distributed on an
	* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	* KIND, either express or implied. See the License for the
	* specific language governing permissions and limitations
	* under the License.
	*/

	/**
	* Custom rule checker for Superset-specific linting patterns
	* Runs as a separate check without needing custom binaries
	*/

	const fs = require('fs');
	const path = require('path');
	const glob = require('glob');
	const parser = require('@babel/parser');
	const traverse = require('@babel/traverse').default;

	// ANSI color codes
	const RED = '\x1b[31m';
	const YELLOW = '\x1b[33m';
	const RESET = '\x1b[0m';

	let errorCount = 0;
	let warningCount = 0;

	/**
	* Check if a node has an eslint-disable comment
	*/
	function hasEslintDisable(path, ruleName = 'theme-colors/no-literal-colors') {
	const { node, parent } = path;

	// Check leadingComments on the node itself
	if (node.leadingComments) {
	const hasDisable = node.leadingComments.some(
	comment =>
	(comment.value.includes('eslint-disable-next-line') \|\|
	comment.value.includes('eslint-disable')) &&
	comment.value.includes(ruleName),
	);
	if (hasDisable) return true;
	}

	// Check leadingComments on parent nodes (for expressions in assignments, etc.)
	if (parent && parent.leadingComments) {
	const hasDisable = parent.leadingComments.some(
	comment =>
	(comment.value.includes('eslint-disable-next-line') \|\|
	comment.value.includes('eslint-disable')) &&
	comment.value.includes(ruleName),
	);
	if (hasDisable) return true;
	}

	// Check if parent is a statement with leading comments
	let current = path;
	while (current.parent) {
	current = current.parent;
	if (current.node && current.node.leadingComments) {
	const hasDisable = current.node.leadingComments.some(
	comment =>
	(comment.value.includes('eslint-disable-next-line') \|\|
	comment.value.includes('eslint-disable')) &&
	comment.value.includes(ruleName),
	);
	if (hasDisable) return true;
	}
	}

	return false;
	}

	/**
	* Check for literal color values (hex, rgb, rgba)
	*/
	function checkNoLiteralColors(ast, filepath) {
	const colorPatterns = [
	/^#[0-9A-Fa-f]{3,6}$/, // Hex colors
	/^rgb\(/, // RGB colors
	/^rgba\(/, // RGBA colors
	];

	traverse(ast, {
	StringLiteral(path) {
	const { value } = path.node;
	if (colorPatterns.some(pattern => pattern.test(value))) {
	// Check if this line has an eslint-disable comment
	if (hasEslintDisable(path)) {
	return; // Skip this violation
	}

	// eslint-disable-next-line no-console
	console.error(
	`${RED}✖${RESET} ${filepath}: Literal color "${value}" found. Use theme colors instead.`,
	);
	errorCount += 1;
	}
	},
	// Check styled-components template literals
	TemplateLiteral(path) {
	path.node.quasis.forEach(quasi => {
	const value = quasi.value.raw;
	// Look for CSS color properties
	if (
	value.match(
	/(?:color\|background\|border-color\|outline-color):\s*(#[0-9A-Fa-f]{3,6}\|rgb\|rgba)/,
	)
	) {
	// Check if this line has an eslint-disable comment
	if (hasEslintDisable(path)) {
	return; // Skip this violation
	}

	// eslint-disable-next-line no-console
	console.error(
	`${RED}✖${RESET} ${filepath}: Literal color in styled component. Use theme colors instead.`,
	);
	errorCount += 1;
	}
	});
	},
	});
	}

	/**
	* Check for FontAwesome icon usage
	*/
	function checkNoFaIcons(ast, filepath) {
	traverse(ast, {
	ImportDeclaration(path) {
	const source = path.node.source.value;
	if (source.includes('@fortawesome') \|\| source.includes('font-awesome')) {
	// eslint-disable-next-line no-console
	console.error(
	`${RED}✖${RESET} ${filepath}: FontAwesome import detected. Use @superset-ui/core/components/Icons instead.`,
	);
	errorCount += 1;
	}
	},
	JSXAttribute(path) {
	if (path.node.name.name === 'className') {
	const { value } = path.node;
	if (
	value &&
	value.type === 'StringLiteral' &&
	value.value.includes('fa-')
	) {
	// eslint-disable-next-line no-console
	console.error(
	`${RED}✖${RESET} ${filepath}: FontAwesome class detected. Use Icons component instead.`,
	);
	errorCount += 1;
	}
	}
	},
	});
	}

	/**
	* Check for improper i18n template usage
	*/
	function checkI18nTemplates(ast, filepath) {
	traverse(ast, {
	CallExpression(path) {
	const { callee } = path.node;
	// Check for t() or tn() functions
	if (
	callee.type === 'Identifier' &&
	(callee.name === 't' \|\| callee.name === 'tn')
	) {
	const args = path.node.arguments;
	if (args.length > 0 && args[0].type === 'TemplateLiteral') {
	const templateLiteral = args[0];
	if (templateLiteral.expressions.length > 0) {
	// eslint-disable-next-line no-console
	console.error(
	`${RED}✖${RESET} ${filepath}: Template variables in t() function. Use parameterized messages instead.`,
	);
	errorCount += 1;
	}
	}
	}
	},
	});
	}

	/**
	* Process a single file
	*/
	function processFile(filepath) {
	const code = fs.readFileSync(filepath, 'utf8');

	try {
	const ast = parser.parse(code, {
	sourceType: 'module',
	plugins: ['jsx', 'typescript', 'decorators-legacy'],
	attachComments: true,
	});

	// Run all checks
	checkNoLiteralColors(ast, filepath);
	checkNoFaIcons(ast, filepath);
	checkI18nTemplates(ast, filepath);
	} catch (error) {
	// eslint-disable-next-line no-console
	console.warn(
	`${YELLOW}⚠${RESET} Could not parse ${filepath}: ${error.message}`,
	);
	warningCount += 1;
	}
	}

	/**
	* Main function
	*/
	function main() {
	const args = process.argv.slice(2);
	let files = args;

	// Define ignore patterns once
	const ignorePatterns = [
	/\.test\./,
	/\.spec\./,
	/\/test\//,
	/\/tests\//,
	/\/storybook\//,
	/\.stories\./,
	/\/demo\//,
	/\/examples\//,
	/\/color\/colorSchemes\//,
	/\/cypress\//,
	/\/cypress-base\//,
	/packages\/superset-ui-demo\//,
	/\/esm\//,
	/\/lib\//,
	/\/dist\//,
	/plugins\/legacy-/, // Legacy plugins can have old color patterns
	/\/vendor\//, // Third-party vendor code
	/spec\/fixtures\//, // Test fixtures
	/theme\/exampleThemes/, // Theme examples legitimately have colors
	/\/color\/utils/, // Color utility functions legitimately work with colors
	/\/theme\/utils/, // Theme utility functions legitimately work with colors
	/packages\/superset-ui-core\/src\/color\/index\.ts/, // Core brand color constants
	];

	// If no files specified, check all
	if (files.length === 0) {
	files = glob.sync('src/*/.{ts,tsx,js,jsx}', {
	ignore: [
	'*/.test.*',
	'*/.spec.*',
	'/test/',
	'/tests/',
	'/node_modules/',
	'/storybook/',
	'*/.stories.*',
	'/demo/',
	'/examples/',
	'/color/colorSchemes/', // Color scheme definitions legitimately contain colors
	'/cypress/',
	'/cypress-base/',
	'packages/superset-ui-demo/**', // Demo package
	'/esm/', // Build artifacts
	'/lib/', // Build artifacts
	'/dist/', // Build artifacts
	'plugins/legacy-/*', // Legacy plugins
	'/vendor/',
	'spec/fixtures/**',
	'/theme/exampleThemes/',
	'/color/utils/',
	'/theme/utils/',
	'packages/superset-ui-core/src/color/index.ts', // Core brand color constants
	],
	});
	} else {
	// Filter to only JS/TS files and remove superset-frontend prefix
	files = files
	.filter(f => /\.(ts\|tsx\|js\|jsx)$/.test(f))
	.map(f => f.replace(/^superset-frontend\//, ''))
	.filter(f => !ignorePatterns.some(pattern => pattern.test(f)));
	}

	if (files.length === 0) {
	// eslint-disable-next-line no-console
	console.log('No files to check.');
	return;
	}

	// eslint-disable-next-line no-console
	console.log(`Checking ${files.length} files for Superset custom rules...\\n`);

	files.forEach(file => {
	// Resolve the file path
	const resolvedPath = path.resolve(file);
	if (fs.existsSync(resolvedPath)) {
	processFile(resolvedPath);
	} else if (fs.existsSync(file)) {
	processFile(file);
	}
	});

	// eslint-disable-next-line no-console
	console.log(`\\n${errorCount} errors, ${warningCount} warnings`);

	if (errorCount > 0) {
	process.exit(1);
	}
	}

	// Run if called directly
	if (require.main === module) {
	main();
	}

	module.exports = { checkNoLiteralColors, checkNoFaIcons, checkI18nTemplates };