litellm/ui/litellm-dashboard/scripts/eslint-rules/no-complex-jsx-arrow.mjs
ryan-crabbe-berri 67fce87b16
chore(ui): add filename, size, JSX-handler, prefer-const, and antd lint rules (#34341)
* chore(ui): add filename, size, JSX-handler, prefer-const, and antd lint rules

Wires up five error-level ESLint rules on the dashboard, grandfathering every
current offender into eslint-suppressions.json so the gate only bites new code
and ratchets down as files are fixed

- local/filename-pascal-case: new local rule requiring PascalCase .tsx names,
  exempting Next.js reserved files (page, layout, route, ...) and test/spec files
  (239 grandfathered)
- max-lines: 800 lines over src/**, excluding tests, src/data, and generated
  schema.d.ts (20 grandfathered)
- local/no-complex-jsx-arrow: new local rule flagging inline JSX arrow handlers
  with block bodies over two statements; each failure is a small extract-to-named
  -handler refactor (65 grandfathered)
- prefer-const: flipped from off to error (103 grandfathered)
- no-restricted-imports: added antd to the phase-out ban alongside tremor, and
  pointed both messages at shadcn/ui primitives (405 antd import sites grandfathered)

Both new local rules ship with RuleTester coverage

* fix(ui): preserve secondary extensions in filename-pascal-case suggestion

The suggestion text built the rename from only the head segment, so a
multi-dot file like my-component.utils.tsx was told to become
MyComponent.tsx instead of MyComponent.utils.tsx. Rebuild it from the
PascalCased head plus the untouched remaining segments, and add tests
covering multi-dot filenames and the hyphenated Next.js reserved names
(global-error, apple-icon, opengraph-image, twitter-image)
2026-07-22 19:34:35 -07:00

41 lines
1.3 KiB
JavaScript

const DEFAULT_MAX_STATEMENTS = 2;
const isJsxAttributeValue = (node) => {
const parent = node.parent;
if (parent == null) return false;
return parent.type === "JSXExpressionContainer" && parent.parent?.type === "JSXAttribute";
};
const rule = {
meta: {
type: "suggestion",
docs: {
description:
"Disallow arrow functions with block bodies over a few statements passed inline as JSX attributes; extract them into a named handler.",
},
schema: [
{
type: "object",
properties: { maxStatements: { type: "integer", minimum: 1 } },
additionalProperties: false,
},
],
messages: {
tooComplex: "Inline JSX arrow handler has {{count}} statements; extract it into a named function (max {{max}}).",
},
},
create(context) {
const maxStatements = context.options[0]?.maxStatements ?? DEFAULT_MAX_STATEMENTS;
return {
ArrowFunctionExpression(node) {
if (node.body.type !== "BlockStatement") return;
if (!isJsxAttributeValue(node)) return;
const count = node.body.body.length;
if (count <= maxStatements) return;
context.report({ node, messageId: "tooComplex", data: { count, max: maxStatements } });
},
};
},
};
export default rule;