eslint-plugin-code-style 1.11.3 → 1.11.7

package/CHANGELOG.md

@@ -7,6 +7,55 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [1.11.7] - 2026-02-04
+
+### Changed
+
+- **`no-hardcoded-strings`**
+  - Remove UI component pattern exemption - ALL enum-like attribute values are now flagged (e.g., `variant="primary"`, `size="large"`, `color="danger"`)
+  - Enforce consistent use of enums for component props to prevent typos
+
+---
+
+## [1.11.6] - 2026-02-04
+
+### Changed
+
+- **`no-hardcoded-strings`**
+  - Flag `type` attribute in JSX elements (e.g., `<input type="text" />`) - should use enums to prevent typos
+  - Remove `type` from default ignored attributes list
+  - Remove "text" from UI component pattern (conflicts with input type)
+  - Update error message for JSX attributes: "should be imported from @/enums (preferred) or @/data to prevent typos"
+
+---
+
+## [1.11.5] - 2026-02-04
+
+### Fixed
+
+- **`no-hardcoded-strings`**
+  - Flag hardcoded strings in component default params (e.g., `type = "text"`, `variant = "ghost"`)
+  - Flag hardcoded strings in ternary expressions (e.g., `showPassword ? "text" : "password"`)
+  - Remove overly broad HTML input type exemption from general string checks
+  - Remove "text" from CSS cursor pattern (conflicts with common input type usage)
+
+---
+
+## [1.11.4] - 2026-02-04
+
+### Fixed
+
+- **`opening-brackets-same-line`**
+  - Collapse JSX elements with simple children to single line (e.g., `<span>{strings.label}</span>`)
+  - Handle simple LogicalExpression children (e.g., `<p>{user?.email || fallback}</p>`)
+
+- **`jsx-children-on-new-line`** / **`jsx-element-child-new-line`**
+  - Recognize simple LogicalExpression (≤2 operands) as simple children
+  - Recognize ChainExpression (optional chaining like `user?.name`) as simple expression
+  - Prevent circular fix conflicts with `opening-brackets-same-line`
+
+---
+
 ## [1.11.3] - 2026-02-04
 
 ### Fixed
@@ -1489,6 +1538,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+[1.11.7]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.11.6...v1.11.7
+[1.11.6]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.11.5...v1.11.6
+[1.11.5]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.11.4...v1.11.5
+[1.11.4]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.11.3...v1.11.4
 [1.11.3]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.11.2...v1.11.3
 [1.11.2]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.11.1...v1.11.2
 [1.11.1]: https://github.com/Mohamed-Elhawary/eslint-plugin-code-style/compare/v1.11.0...v1.11.1

package/index.js

@@ -7683,6 +7683,12 @@ const jsxChildrenOnNewLine = {
 
             if (expr.type === "Identifier") return true;
             if (expr.type === "Literal") return true;
+
+            // Handle ChainExpression (optional chaining like user?.name)
+            if (expr.type === "ChainExpression") {
+                return isSimpleExpressionHandler(expr.expression);
+            }
+
             if (expr.type === "MemberExpression") {
                 // Allow nested member expressions like row.original.currency or row[field]
                 let current = expr;
@@ -7700,6 +7706,11 @@ const jsxChildrenOnNewLine = {
                     current = current.object;
                 }
 
+                // Handle ChainExpression at the end of the chain
+                if (current.type === "ChainExpression") {
+                    return isSimpleExpressionHandler(current.expression);
+                }
+
                 return current.type === "Identifier";
             }
 
@@ -7719,6 +7730,32 @@ const jsxChildrenOnNewLine = {
                 return false;
             }
 
+            // Allow simple LogicalExpression (2 operands with simple left/right)
+            if (expr.type === "LogicalExpression") {
+                // Count operands - if more than 2, not simple
+                const countOperands = (n) => {
+                    if (n.type === "LogicalExpression") {
+                        return countOperands(n.left) + countOperands(n.right);
+                    }
+
+                    return 1;
+                };
+
+                if (countOperands(expr) > 2) return false;
+
+                // Check if left and right are simple
+                const isSimpleSide = (n) => {
+                    if (n.type === "Identifier") return true;
+                    if (n.type === "Literal") return true;
+                    if (n.type === "MemberExpression") return isSimpleExpressionHandler(n);
+                    if (n.type === "ChainExpression" && n.expression) return isSimpleSide(n.expression);
+
+                    return false;
+                };
+
+                return isSimpleSide(expr.left) && isSimpleSide(expr.right);
+            }
+
             return false;
         };
 
@@ -7944,6 +7981,12 @@ const jsxElementChildNewLine = {
 
             if (expr.type === "Identifier") return true;
             if (expr.type === "Literal") return true;
+
+            // Handle ChainExpression (optional chaining like user?.name)
+            if (expr.type === "ChainExpression") {
+                return isSimpleExpressionHandler(expr.expression);
+            }
+
             if (expr.type === "MemberExpression") {
                 // Allow nested member expressions like row.original.currency or row[field]
                 let current = expr;
@@ -7961,6 +8004,11 @@ const jsxElementChildNewLine = {
                     current = current.object;
                 }
 
+                // Handle ChainExpression at the end of the chain
+                if (current.type === "ChainExpression") {
+                    return isSimpleExpressionHandler(current.expression);
+                }
+
                 return current.type === "Identifier";
             }
 
@@ -7980,6 +8028,32 @@ const jsxElementChildNewLine = {
                 return false;
             }
 
+            // Allow simple LogicalExpression (2 operands with simple left/right)
+            if (expr.type === "LogicalExpression") {
+                // Count operands - if more than 2, not simple
+                const countOperands = (n) => {
+                    if (n.type === "LogicalExpression") {
+                        return countOperands(n.left) + countOperands(n.right);
+                    }
+
+                    return 1;
+                };
+
+                if (countOperands(expr) > 2) return false;
+
+                // Check if left and right are simple
+                const isSimpleSide = (n) => {
+                    if (n.type === "Identifier") return true;
+                    if (n.type === "Literal") return true;
+                    if (n.type === "MemberExpression") return isSimpleExpressionHandler(n);
+                    if (n.type === "ChainExpression" && n.expression) return isSimpleSide(n.expression);
+
+                    return false;
+                };
+
+                return isSimpleSide(expr.left) && isSimpleSide(expr.right);
+            }
+
             return false;
         };
 
@@ -13117,6 +13191,49 @@ const openingBracketsSameLine = {
                         message: "Simple expression should be on single line in JSX attribute",
                         node: expression,
                     });
+
+                    return;
+                }
+
+                // Check if parent JSX element should be collapsed to single line
+                // e.g., <span>\n    {strings.label}\n</span> → <span>{strings.label}</span>
+                const parent = node.parent;
+
+                if (parent && parent.type === "JSXElement") {
+                    const children = parent.children.filter(
+                        (child) => !(child.type === "JSXText" && /^\s*$/.test(child.value)),
+                    );
+
+                    // Only collapse if this expression is the only meaningful child
+                    if (children.length === 1 && children[0] === node) {
+                        const openingTag = parent.openingElement;
+                        const closingTag = parent.closingElement;
+
+                        if (closingTag) {
+                            const openTagEnd = openingTag.loc.end.line;
+                            const closeTagStart = closingTag.loc.start.line;
+
+                            // Check if element spans multiple lines but content is simple
+                            if (openTagEnd !== closeTagStart) {
+                                const openTagText = sourceCode.getText(openingTag);
+                                const closeTagText = sourceCode.getText(closingTag);
+                                const expressionText = sourceCode.getText(node);
+                                const collapsedLength = openTagText.length + expressionText.length + closeTagText.length;
+
+                                // Only collapse if total length is reasonable
+                                if (collapsedLength <= 120) {
+                                    context.report({
+                                        fix: (fixer) => fixer.replaceTextRange(
+                                            [openingTag.range[1], closingTag.range[0]],
+                                            expressionText,
+                                        ),
+                                        message: "JSX element with simple expression should be on single line",
+                                        node: parent,
+                                    });
+                                }
+                            }
+                        }
+                    }
                 }
 
                 return;
@@ -13280,6 +13397,48 @@ const openingBracketsSameLine = {
                             message: "Simple logical expression should be on a single line",
                             node: expression,
                         });
+
+                        return;
+                    }
+
+                    // Check if parent JSX element should be collapsed to single line
+                    const parent = node.parent;
+
+                    if (parent && parent.type === "JSXElement") {
+                        const children = parent.children.filter(
+                            (child) => !(child.type === "JSXText" && /^\s*$/.test(child.value)),
+                        );
+
+                        // Only collapse if this expression is the only meaningful child
+                        if (children.length === 1 && children[0] === node) {
+                            const openingTag = parent.openingElement;
+                            const closingTag = parent.closingElement;
+
+                            if (closingTag) {
+                                const openTagEnd = openingTag.loc.end.line;
+                                const closeTagStart = closingTag.loc.start.line;
+
+                                // Check if element spans multiple lines but content is simple
+                                if (openTagEnd !== closeTagStart) {
+                                    const openTagText = sourceCode.getText(openingTag);
+                                    const closeTagText = sourceCode.getText(closingTag);
+                                    const collapsedExpr = "{" + collapsedText + "}";
+                                    const collapsedLength = openTagText.length + collapsedExpr.length + closeTagText.length;
+
+                                    // Only collapse if total length is reasonable
+                                    if (collapsedLength <= 120) {
+                                        context.report({
+                                            fix: (fixer) => fixer.replaceTextRange(
+                                                [openingTag.range[1], closingTag.range[0]],
+                                                collapsedExpr,
+                                            ),
+                                            message: "JSX element with simple logical expression should be on single line",
+                                            node: parent,
+                                        });
+                                    }
+                                }
+                            }
+                        }
                     }
 
                     return;
@@ -14402,7 +14561,7 @@ const noHardcodedStrings = {
             "textDecoration", // SVG
             "transform", // SVG
             "translate",
-            "type",
+            // "type" removed - should use enums for input/button types to prevent typos
             "vectorEffect", // SVG
             "useMap",
             "value",
@@ -14487,8 +14646,8 @@ const noHardcodedStrings = {
             /^[a-zA-Z]+\d*[_a-zA-Z0-9]*(_[a-zA-Z0-9]+)+$/,
             // Color names (CSS named colors used in SVG)
             /^(white|black|red|green|blue|yellow|orange|purple|pink|brown|gray|grey|cyan|magenta|transparent)$/i,
-            // CSS cursor values
-            /^(auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|grab|grabbing|all-scroll|col-resize|row-resize|n-resize|e-resize|s-resize|w-resize|ne-resize|nw-resize|se-resize|sw-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|zoom-in|zoom-out)$/,
+            // CSS cursor values (excluding "text" as it conflicts with input type)
+            /^(auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|vertical-text|alias|copy|move|no-drop|not-allowed|grab|grabbing|all-scroll|col-resize|row-resize|n-resize|e-resize|s-resize|w-resize|ne-resize|nw-resize|se-resize|sw-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|zoom-in|zoom-out)$/,
             // CSS display/visibility values
             /^(block|inline|inline-block|flex|inline-flex|grid|inline-grid|flow-root|contents|table|table-row|table-cell|list-item|none|visible|hidden|collapse)$/,
             // CSS position values
@@ -14642,9 +14801,6 @@ const noHardcodedStrings = {
             });
         };
 
-        // UI component patterns - only ignored in JSX attributes, not in logic
-        const uiComponentPattern = /^(primary|secondary|tertiary|ghost|outline|link|muted|danger|warning|info|success|error|default|subtle|solid|soft|plain|flat|elevated|filled|tonal|text|contained|standard|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|xxs|xxl|small|medium|large|tiny|huge|compact|comfortable|spacious|left|right|center|top|bottom|start|end|middle|baseline|stretch|between|around|evenly|horizontal|vertical|row|column|inline|block|flex|grid|auto|none|hidden|visible|static|relative|absolute|fixed|sticky|on|off|hover|focus|click|blur|always|never)$/;
-
         // HTML input types - standard browser input types, not hardcoded strings
         const htmlInputTypes = new Set([
             "button",
@@ -14764,21 +14920,6 @@ const noHardcodedStrings = {
             return false;
         };
 
-        // Check if string is in a default parameter for input type
-        const isInputTypeDefaultParamHandler = (node) => {
-            // Check if we're in an AssignmentPattern (default param)
-            if (node.parent && node.parent.type === "AssignmentPattern") {
-                const assignPattern = node.parent;
-
-                // Check if the parameter name is "type"
-                if (assignPattern.left && assignPattern.left.type === "Identifier" && assignPattern.left.name === "type") {
-                    return true;
-                }
-            }
-
-            return false;
-        };
-
         // Check if this is a module-level exported string that should be flagged
         const isExportedHardcodedStringHandler = (node) => {
             let current = node.parent;
@@ -14836,19 +14977,23 @@ const noHardcodedStrings = {
             const isSingleWord = !/\s/.test(str) && str.length <= 30;
             const isAllLowercase = /^[a-z_]+$/.test(str);
 
+            // For JSX attributes (type, variant, etc.), prefer enums to prevent typos
+            const isJsxAttribute = context.includes("attribute");
+
             if (isSingleWord && isAllLowercase) {
-                return `Hardcoded data keyword or enum "${truncatedStr}"${contextPart} should be imported from @/data or @/enums (e.g., import { StatusEnum } from "@/enums")`;
+                if (isJsxAttribute) {
+                    return `Hardcoded "${truncatedStr}"${contextPart} should be imported from @/enums (preferred) or @/data to prevent typos (e.g., import { InputTypeEnum } from "@/enums")`;
+                }
+
+                return `Hardcoded "${truncatedStr}"${contextPart} should be imported from @/enums (preferred) or @/data (e.g., import { StatusEnum } from "@/enums")`;
             }
 
             // UI string: starts with capital, has spaces, or multiple words
-            return `Hardcoded UI string "${truncatedStr}"${contextPart} should be imported from @/strings or @/constants or @/@strings or @/@constants (e.g., import { strings } from "@/strings")`;
+            return `Hardcoded UI string "${truncatedStr}"${contextPart} should be imported from @/strings or @/constants (e.g., import { strings } from "@/strings")`;
         };
 
         // Check if a string matches any ignore pattern
         const shouldIgnoreStringHandler = (str) => {
-            // Skip HTML input types (text, password, email, etc.)
-            if (isHtmlInputTypeHandler(str)) return true;
-
             // Skip Tailwind/CSS class strings
             if (isTailwindClassStringHandler(str)) return true;
 
@@ -15120,9 +15265,6 @@ const noHardcodedStrings = {
                 if (node.value.type === "Literal" && typeof node.value.value === "string") {
                     const str = node.value.value;
 
-                    // Skip UI component patterns in JSX attributes (variant, size, position props)
-                    if (uiComponentPattern.test(str)) return;
-
                     if (shouldIgnoreStringHandler(str)) return;
 
                     // Check if it looks like user-facing text
@@ -15144,9 +15286,6 @@ const noHardcodedStrings = {
                     if (expression.type === "Literal" && typeof expression.value === "string") {
                         const str = expression.value;
 
-                        // Skip UI component patterns in JSX attributes (variant, size, position props)
-                        if (uiComponentPattern.test(str)) return;
-
                         if (shouldIgnoreStringHandler(str)) return;
 
                         if (!/[a-zA-Z]/.test(str)) return;
@@ -15169,9 +15308,6 @@ const noHardcodedStrings = {
                 // Skip if inside a style object (style={{ transform: "..." }})
                 if (isInsideStyleObjectHandler(node)) return;
 
-                // Skip input type default params (e.g., type = "text")
-                if (isInputTypeDefaultParamHandler(node)) return;
-
                 // Check for exported hardcoded strings (e.g., export const tokenKey = "auth_token")
                 // These should be flagged even at module level, regardless of whether the value
                 // looks "technical" - the point is exposing hardcoded strings in exports

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-code-style",
-    "version": "1.11.3",
+    "version": "1.11.7",
     "description": "A custom ESLint plugin for enforcing consistent code formatting and style rules in React/JSX projects",
     "main": "index.js",
     "types": "index.d.ts",