JSX Syntax Rules

const structureRules = {
  /** Report missing key props in iterators/collection literals */
  'react/jsx-key': ESLintRule;
  /** Prevent duplicate props in JSX */  
  'react/jsx-no-duplicate-props': ESLintRule;
  /** Disallow undeclared variables in JSX */
  'react/jsx-no-undef': ESLintRule;
  /** Prevent React to be incorrectly marked as unused */
  'react/jsx-uses-react': ESLintRule;
  /** Prevent variables used in JSX to be incorrectly marked as unused */
  'react/jsx-uses-vars': ESLintRule;
  /** Enforce PascalCase for user-defined JSX components */
  'react/jsx-pascal-case': ESLintRule;
};

// ✓ Good - Key prop in list items
{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

// ✗ Bad - Missing key prop
{items.map(item => (
  <li>{item.name}</li>
))}

// ✓ Good - No duplicate props
<MyComponent name="John" age={25} />

// ✗ Bad - Duplicate props
<MyComponent name="John" name="Jane" />

// ✓ Good - Component in PascalCase
<MyComponent />
<CustomButton />

// ✗ Bad - Component not in PascalCase
<myComponent />
<custombutton />

const formattingRules = {
  /** Validate JSX indentation */
  'react/jsx-indent': ESLintRule;
  /** Validate props indentation in JSX */
  'react/jsx-indent-props': ESLintRule;
  /** Validate closing bracket location in JSX */
  'react/jsx-closing-bracket-location': ESLintRule;
  /** Validate closing tag location for multiline JSX */
  'react/jsx-closing-tag-location': ESLintRule;
  /** Enforce position of the first prop in JSX */
  'react/jsx-first-prop-new-line': ESLintRule;
  /** Limit maximum of props on a single line in JSX */
  'react/jsx-max-props-per-line': ESLintRule;
  /** Require or prevent a new line after jsx elements and expressions */
  'react/jsx-newline': ESLintRule;
  /** Restrict to one expression per line in JSX */
  'react/jsx-one-expression-per-line': ESLintRule;
};

// ✓ Good - Proper JSX indentation (2 spaces)
<div>
  <span>Hello</span>
  <p>World</p>
</div>

// ✗ Bad - Incorrect indentation
<div>
    <span>Hello</span>
<p>World</p>
</div>

// ✓ Good - Closing bracket on new line for multiline
<MyComponent
  prop1="value1"
  prop2="value2"
>
  Content
</MyComponent>

// ✗ Bad - Closing bracket position inconsistent
<MyComponent
  prop1="value1"
  prop2="value2">
  Content
</MyComponent>

// ✓ Good - One prop per line when multiline
<MyComponent
  prop1="value1"
  prop2="value2"
  prop3="value3"
/>

// ✗ Bad - Multiple props on same line when multiline
<MyComponent
  prop1="value1" prop2="value2"
  prop3="value3"
/>

const spacingRules = {
  /** Enforce or disallow spaces inside of curly braces in JSX attributes */
  'react/jsx-curly-spacing': ESLintRule;
  /** Enforce consistent line breaks inside jsx curly */
  'react/jsx-curly-newline': ESLintRule;
  /** Enforce or disallow spaces around equal signs in JSX attributes */
  'react/jsx-equals-spacing': ESLintRule;
  /** Disallow multiple spaces between inline JSX props */
  'react/jsx-props-no-multi-spaces': ESLintRule;
  /** Validate whitespace in and around the JSX opening and closing brackets */
  'react/jsx-tag-spacing': ESLintRule;
  /** Enforce spacing before closing bracket in JSX (deprecated) */
  'react/jsx-space-before-closing': ESLintRule;
  /** Enforce child element spacing */
  'react/jsx-child-element-spacing': ESLintRule;
};

// ✓ Good - No spaces inside curly braces (default)
<MyComponent prop={value} />

// ✓ Good - Spaces inside curly braces (when configured)
<MyComponent prop={ value } />

// ✗ Bad - Inconsistent curly spacing
<MyComponent prop={value } other={ otherValue} />

// ✓ Good - No spaces around equals
<MyComponent prop="value" />

// ✗ Bad - Spaces around equals
<MyComponent prop = "value" />

// ✓ Good - Single space between props
<MyComponent prop1="value1" prop2="value2" />

// ✗ Bad - Multiple spaces between props
<MyComponent prop1="value1"    prop2="value2" />

// ✓ Good - Proper tag spacing
<MyComponent />
<MyComponent>content</MyComponent>

// ✗ Bad - Incorrect tag spacing
< MyComponent />
<MyComponent/ >

const attributeRules = {
  /** Enforce boolean attributes notation in JSX */
  'react/jsx-boolean-value': ESLintRule;
  /** Enforce or forbid the use of curly braces inside JSX props */
  'react/jsx-curly-brace-presence': ESLintRule;
  /** Enforce props alphabetical sorting */
  'react/jsx-sort-props': ESLintRule;
  /** Prevent JSX prop spreading */
  'react/jsx-props-no-spreading': ESLintRule;
  /** Disallow JSX props to use spread operator with multiple objects */
  'react/jsx-props-no-spread-multi': ESLintRule;
  /** Enforce default props alphabetical sorting */
  'react/jsx-sort-default-props': ESLintRule;
};

// ✓ Good - Explicit boolean value (when configured)
<MyComponent isVisible={true} isDisabled={false} />

// ✓ Good - Shorthand boolean (when configured)
<MyComponent isVisible isDisabled />

// ✗ Bad - Mixed boolean styles
<MyComponent isVisible={true} isDisabled />

// ✓ Good - Curly braces when needed
<MyComponent className="container" count={42} />

// ✗ Bad - Unnecessary curly braces
<MyComponent className={"container"} />

// ✓ Good - Props in alphabetical order (when configured)
<MyComponent
  anotherProp="value"
  someProp="value"
  zProp="value"
/>

// ✗ Bad - Props not alphabetically sorted
<MyComponent
  zProp="value"
  anotherProp="value"
  someProp="value"
/>

const contentRules = {
  /** Prevent comments from being inserted as text nodes */
  'react/jsx-no-comment-textnodes': ESLintRule;
  /** Prevent using string literals in JSX */
  'react/jsx-no-literals': ESLintRule;
  /** Disallow unnecessary fragments */
  'react/jsx-no-useless-fragment': ESLintRule;
  /** Enforce or prevent new line after jsx elements and expressions */
  'react/jsx-newline': ESLintRule;
  /** Prevent missing parentheses around multilines JSX */
  'react/jsx-wrap-multilines': ESLintRule;
  /** Validate JSX maximum depth */
  'react/jsx-max-depth': ESLintRule;
};

// ✓ Good - Proper comment syntax
<div>
  {/* This is a comment */}
  <span>Content</span>
</div>

// ✗ Bad - Comment as text node
<div>
  // This will render as text
  <span>Content</span>
</div>

// ✓ Good - String in JSX (when literals allowed)
<div>Hello World</div>

// ✗ Bad - String literal (when rule forbids literals)
<div>Hello World</div>
// Should be: <div>{'Hello World'}</div>

// ✓ Good - Fragment with multiple children
<>
  <div>First</div>
  <div>Second</div>
</>

// ✗ Bad - Unnecessary fragment with single child
<>
  <div>Only child</div>
</>

// ✓ Good - Multiline JSX with parentheses
const element = (
  <div>
    <span>Multiline</span>
    <span>JSX</span>
  </div>
);

// ✗ Bad - Multiline JSX without parentheses
const element = <div>
  <span>Multiline</span>
  <span>JSX</span>
</div>;

const fragmentRules = {
  /** Enforce shorthand or standard form for React fragments */
  'react/jsx-fragments': ESLintRule;
  /** Disallow unnecessary fragments */
  'react/jsx-no-useless-fragment': ESLintRule;
};

// ✓ Good - React.Fragment syntax (when configured)
<React.Fragment>
  <div>First</div>
  <div>Second</div>
</React.Fragment>

// ✓ Good - Short syntax (when configured)
<>
  <div>First</div>
  <div>Second</div>
</>

// ✗ Bad - Mixing fragment syntaxes or using wrong syntax

// ✓ Good - Fragment with multiple children
<>
  <div>Child 1</div>
  <div>Child 2</div>
</>

// ✗ Bad - Unnecessary fragment
<>
  <div>Single child</div>
</>

const securityRules = {
  /** Restrict JSX props from using arrow functions and bind */
  'react/jsx-no-bind': ESLintRule;
  /** Prevent passing of children to void DOM elements */
  'react/jsx-no-constructed-context-values': ESLintRule;
  /** Prevent problematic leaked values from being rendered */
  'react/jsx-no-leaked-render': ESLintRule;
  /** Forbid javascript: URLs */
  'react/jsx-no-script-url': ESLintRule;
  /** Forbid target="_blank" attribute without rel="noreferrer" */
  'react/jsx-no-target-blank': ESLintRule;
};

// ✓ Good - Pre-bound handler
class MyComponent extends React.Component {
  handleClick = () => {
    // handler logic
  }
  
  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

// ✗ Bad - Inline bind (when rule enabled)
<button onClick={this.handleClick.bind(this)}>Click</button>

// ✓ Good - Safe external link
<a href="https://example.com" target="_blank" rel="noreferrer">
  External Link
</a>

// ✗ Bad - target="_blank" without rel="noreferrer"
<a href="https://example.com" target="_blank">External Link</a>

// ✓ Good - Safe URL
<a href="https://example.com">Safe Link</a>

// ✗ Bad - javascript: URL
<a href="javascript:void(0)">Unsafe Link</a>

const fileRules = {
  /** Restrict file extensions that may contain JSX */
  'react/jsx-filename-extension': ESLintRule;
};

// Configuration example
{
  "rules": {
    "react/jsx-filename-extension": [
      "error", 
      { "extensions": [".jsx", ".tsx"] }
    ]
  }
}

// ✓ Good - JSX in .jsx file
// MyComponent.jsx
export const MyComponent = () => <div>Hello</div>;

// ✗ Bad - JSX in .js file (when rule enforces .jsx)
// MyComponent.js  
export const MyComponent = () => <div>Hello</div>;

{
  "rules": {
    "react/jsx-indent": ["error", 2, {
      "checkAttributes": true,
      "indentLogicalExpressions": true
    }],
    "react/jsx-curly-spacing": ["error", {
      "when": "never",
      "attributes": {"allowMultiline": true},
      "children": true
    }],
    "react/jsx-sort-props": ["error", {
      "callbacksLast": true,
      "shorthandFirst": false,
      "shorthandLast": true,
      "ignoreCase": true,
      "noSortAlphabetically": false,
      "reservedFirst": true
    }],
    "react/jsx-max-props-per-line": ["error", {
      "maximum": { "single": 3, "multi": 1 }
    }]
  }
}