eslint-plugin-nextfriday 1.5.3 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # eslint-plugin-nextfriday
 
+## 1.7.0
+
+### Minor Changes
+
+- [#41](https://github.com/next-friday/eslint-plugin-nextfriday/pull/41) [`10b67d9`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/10b67d941c47fef5b72408bfff2b56e98a46c26c) Thanks [@nextfridaydeveloper](https://github.com/nextfridaydeveloper)! - Add no-direct-date rule to disallow direct usage of Date constructor and methods (new Date(), Date.now(), Date.parse()) to enforce centralized date utilities like dayjs
+
+## 1.6.0
+
+### Minor Changes
+
+- [#36](https://github.com/next-friday/eslint-plugin-nextfriday/pull/36) [`f819ffa`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/f819ffa8eed179e38eed4ec51a05dec53dd979d0) Thanks [@joetakara](https://github.com/joetakara)! - Add three new ESLint rules:
+  - `jsx-no-non-component-function`: Prevent non-component functions at top level in .tsx/.jsx files
+  - `enforce-sorted-destructuring`: Enforce alphabetical sorting of destructured properties with defaults first
+  - `jsx-no-variable-in-callback`: Prevent variable declarations inside JSX callbacks for cleaner code
+
 ## 1.5.3
 
 ### Patch Changes

package/README.md

@@ -22,7 +22,7 @@ pnpm add -D eslint-plugin-nextfriday
 import nextfriday from "eslint-plugin-nextfriday";
 
 export default [nextfriday.configs.base];
-// or use the recommended preset
+// or use the recommended preset (stricter)
 export default [nextfriday.configs["base/recommended"]];
 ```
 
@@ -59,19 +59,37 @@ export default [
       nextfriday,
     },
     rules: {
-      "nextfriday/no-emoji": "error",
+      // Variable Naming
+      "nextfriday/no-single-char-variables": "error",
+      "nextfriday/boolean-naming-prefix": "error",
+
+      // File Naming
       "nextfriday/file-kebab-case": "error",
+      "nextfriday/jsx-pascal-case": "error",
       "nextfriday/md-filename-case-restriction": "error",
+
+      // Code Style
+      "nextfriday/no-emoji": "error",
       "nextfriday/prefer-destructuring-params": "error",
-      "nextfriday/no-explicit-return-type": "error",
-      "nextfriday/prefer-import-type": "error",
-      "nextfriday/prefer-named-param-types": "error",
-      "nextfriday/prefer-react-import-types": "error",
+      "nextfriday/prefer-function-declaration": "error",
+      "nextfriday/require-explicit-return-type": "error",
       "nextfriday/no-complex-inline-return": "error",
       "nextfriday/no-logic-in-params": "error",
+      "nextfriday/enforce-sorted-destructuring": "error",
       "nextfriday/no-env-fallback": "error",
-      "nextfriday/jsx-pascal-case": "error",
+
+      // Import Optimization
+      "nextfriday/prefer-import-type": "error",
+      "nextfriday/prefer-react-import-types": "error",
+
+      // Type Patterns
+      "nextfriday/prefer-named-param-types": "error",
       "nextfriday/prefer-interface-over-inline-types": "error",
+
+      // React/JSX
+      "nextfriday/jsx-no-non-component-function": "error",
+      "nextfriday/jsx-no-variable-in-callback": "error",
+      "nextfriday/prefer-jsx-template-literals": "error",
       "nextfriday/react-props-destructure": "error",
       "nextfriday/enforce-readonly-component-props": "error",
     },
@@ -110,87 +128,119 @@ module.exports = {
 
 ## Rules
 
-| Rule                                                                                   | Description                                                                   | Fixable |
-| -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ------- |
-| [no-emoji](docs/rules/NO_EMOJI.md)                                                     | Disallow emojis in code                                                       | ❌      |
-| [file-kebab-case](docs/rules/FILE_KEBAB_CASE.md)                                       | Enforce kebab-case filenames for .ts and .js files                            | ❌      |
-| [jsx-pascal-case](docs/rules/JSX_PASCAL_CASE.md)                                       | Enforce PascalCase filenames for .jsx and .tsx files                          | ❌      |
-| [md-filename-case-restriction](docs/rules/MD_FILENAME_CASE_RESTRICTION.md)             | Enforce SNAKE_CASE filenames for .md files                                    | ❌      |
-| [prefer-destructuring-params](docs/rules/PREFER_DESTRUCTURING_PARAMS.md)               | Enforce destructuring for functions with multiple parameters                  | ❌      |
-| [no-explicit-return-type](docs/rules/NO_EXPLICIT_RETURN_TYPE.md)                       | Disallow explicit return types on functions                                   | ✅      |
-| [prefer-import-type](docs/rules/PREFER_IMPORT_TYPE.md)                                 | Enforce using 'import type' for type-only imports                             | ✅      |
-| [prefer-named-param-types](docs/rules/PREFER_NAMED_PARAM_TYPES.md)                     | Enforce named types for function parameters with object types                 | ❌      |
-| [prefer-interface-over-inline-types](docs/rules/PREFER_INTERFACE_OVER_INLINE_TYPES.md) | Enforce interface declarations over inline types for React props              | ❌      |
-| [prefer-react-import-types](docs/rules/PREFER_REACT_IMPORT_TYPES.md)                   | Enforce direct imports from 'react' instead of React.X                        | ✅      |
-| [react-props-destructure](docs/rules/REACT_PROPS_DESTRUCTURE.md)                       | Enforce destructuring props inside React component body                       | ❌      |
-| [enforce-readonly-component-props](docs/rules/ENFORCE_READONLY_COMPONENT_PROPS.md)     | Enforce Readonly wrapper for React component props                            | ✅      |
-| [no-complex-inline-return](docs/rules/NO_COMPLEX_INLINE_RETURN.md)                     | Disallow complex inline expressions in return statements - prefer const first | ❌      |
-| [no-logic-in-params](docs/rules/NO_LOGIC_IN_PARAMS.md)                                 | Disallow logic or conditions in function parameters - extract to const first  | ❌      |
-| [no-env-fallback](docs/rules/NO_ENV_FALLBACK.md)                                       | Disallow fallback values for environment variables as they can be dangerous   | ❌      |
-
-## Configurations
-
-### Base Configurations (for pure JS/TS projects)
-
-#### `base`
-
-Basic configuration without JSX-specific rules:
+### Variable Naming Rules
 
-- `nextfriday/no-emoji`: `"error"`
-- `nextfriday/file-kebab-case`: `"error"`
-- `nextfriday/md-filename-case-restriction`: `"error"`
-- `nextfriday/prefer-destructuring-params`: `"error"`
-- `nextfriday/no-explicit-return-type`: `"error"`
-- `nextfriday/prefer-import-type`: `"error"`
-- `nextfriday/prefer-named-param-types`: `"error"`
-- `nextfriday/prefer-react-import-types`: `"error"`
-- `nextfriday/no-complex-inline-return`: `"error"`
-- `nextfriday/no-logic-in-params`: `"error"`
-- `nextfriday/no-env-fallback`: `"error"`
+| Rule                                                               | Description                                                           | Fixable |
+| ------------------------------------------------------------------ | --------------------------------------------------------------------- | ------- |
+| [no-single-char-variables](docs/rules/NO_SINGLE_CHAR_VARIABLES.md) | Disallow single character variable names (e.g., `d`, `u`, `l`)        | ❌      |
+| [boolean-naming-prefix](docs/rules/BOOLEAN_NAMING_PREFIX.md)       | Enforce boolean variables to have prefix (is, has, should, can, etc.) | ❌      |
 
-#### `base/recommended`
+### File Naming Rules
 
-Same as `base` configuration (recommended preset for pure JS/TS projects).
+| Rule                                                                       | Description                                          | Fixable |
+| -------------------------------------------------------------------------- | ---------------------------------------------------- | ------- |
+| [file-kebab-case](docs/rules/FILE_KEBAB_CASE.md)                           | Enforce kebab-case filenames for .ts and .js files   | ❌      |
+| [jsx-pascal-case](docs/rules/JSX_PASCAL_CASE.md)                           | Enforce PascalCase filenames for .jsx and .tsx files | ❌      |
+| [md-filename-case-restriction](docs/rules/MD_FILENAME_CASE_RESTRICTION.md) | Enforce SNAKE_CASE filenames for .md files           | ❌      |
 
-### React Configurations
+### Code Style Rules
 
-#### `react`
+| Rule                                                                       | Description                                                            | Fixable |
+| -------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------- |
+| [no-emoji](docs/rules/NO_EMOJI.md)                                         | Disallow emoji characters in source code                               | ❌      |
+| [prefer-destructuring-params](docs/rules/PREFER_DESTRUCTURING_PARAMS.md)   | Enforce destructuring for functions with multiple parameters           | ❌      |
+| [prefer-function-declaration](docs/rules/PREFER_FUNCTION_DECLARATION.md)   | Enforce function declarations over arrow functions in .ts files        | ❌      |
+| [require-explicit-return-type](docs/rules/REQUIRE_EXPLICIT_RETURN_TYPE.md) | Require explicit return types on functions for better documentation    | ❌      |
+| [no-complex-inline-return](docs/rules/NO_COMPLEX_INLINE_RETURN.md)         | Disallow complex inline expressions in return - extract to const first | ❌      |
+| [no-logic-in-params](docs/rules/NO_LOGIC_IN_PARAMS.md)                     | Disallow logic/conditions in function parameters - extract to const    | ❌      |
+| [enforce-sorted-destructuring](docs/rules/ENFORCE_SORTED_DESTRUCTURING.md) | Enforce alphabetical sorting of destructured properties                | ❌      |
+| [no-env-fallback](docs/rules/NO_ENV_FALLBACK.md)                           | Disallow fallback values for environment variables                     | ❌      |
+| [no-direct-date](docs/rules/NO_DIRECT_DATE.md)                             | Disallow direct usage of Date constructor and methods                  | ❌      |
 
-Includes all base rules plus React-specific rules:
+### Import Optimization Rules
 
-- All base rules above
-- `nextfriday/jsx-pascal-case`: `"error"`
-- `nextfriday/prefer-interface-over-inline-types`: `"error"`
-- `nextfriday/react-props-destructure`: `"error"`
-- `nextfriday/enforce-readonly-component-props`: `"error"`
+| Rule                                                                 | Description                                            | Fixable |
+| -------------------------------------------------------------------- | ------------------------------------------------------ | ------- |
+| [prefer-import-type](docs/rules/PREFER_IMPORT_TYPE.md)               | Enforce using 'import type' for type-only imports      | ✅      |
+| [prefer-react-import-types](docs/rules/PREFER_REACT_IMPORT_TYPES.md) | Enforce direct imports from 'react' instead of React.X | ✅      |
 
-#### `react/recommended`
+### Type Pattern Rules
 
-Same as `react` configuration (recommended preset for React projects).
+| Rule                                                                                   | Description                                                      | Fixable |
+| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------- |
+| [prefer-named-param-types](docs/rules/PREFER_NAMED_PARAM_TYPES.md)                     | Enforce named types for function parameters with object types    | ❌      |
+| [prefer-interface-over-inline-types](docs/rules/PREFER_INTERFACE_OVER_INLINE_TYPES.md) | Enforce interface declarations over inline types for React props | ❌      |
 
-### Next.js Configurations
+### React/JSX Rules
 
-#### `nextjs`
+| Rule                                                                               | Description                                                          | Fixable |
+| ---------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------- |
+| [jsx-no-non-component-function](docs/rules/JSX_NO_NON_COMPONENT_FUNCTION.md)       | Disallow non-component functions at top level in .tsx/.jsx files     | ❌      |
+| [jsx-no-variable-in-callback](docs/rules/JSX_NO_VARIABLE_IN_CALLBACK.md)           | Disallow variable declarations inside callback functions in JSX      | ❌      |
+| [prefer-jsx-template-literals](docs/rules/PREFER_JSX_TEMPLATE_LITERALS.md)         | Enforce template literals instead of mixing text and JSX expressions | ✅      |
+| [react-props-destructure](docs/rules/REACT_PROPS_DESTRUCTURE.md)                   | Enforce destructuring props inside React component body              | ❌      |
+| [enforce-readonly-component-props](docs/rules/ENFORCE_READONLY_COMPONENT_PROPS.md) | Enforce Readonly wrapper for React component props                   | ✅      |
 
-Includes all rules suitable for Next.js projects:
-
-- All base rules
-- `nextfriday/jsx-pascal-case`: `"error"`
-- `nextfriday/prefer-interface-over-inline-types`: `"error"`
-- `nextfriday/react-props-destructure`: `"error"`
-- `nextfriday/enforce-readonly-component-props`: `"error"`
-
-#### `nextjs/recommended`
+## Configurations
 
-Same as `nextjs` configuration (recommended preset for Next.js projects).
+### Configuration Presets Overview
+
+| Preset               | Severity | Base Rules | JSX Rules | Total Rules |
+| -------------------- | -------- | ---------- | --------- | ----------- |
+| `base`               | warn     | 16         | 0         | 16          |
+| `base/recommended`   | error    | 16         | 0         | 16          |
+| `react`              | warn     | 16         | 7         | 23          |
+| `react/recommended`  | error    | 16         | 7         | 23          |
+| `nextjs`             | warn     | 16         | 7         | 23          |
+| `nextjs/recommended` | error    | 16         | 7         | 23          |
+
+### Base Configuration Rules (16 rules)
+
+Included in `base`, `base/recommended`, and all other presets:
+
+- `nextfriday/boolean-naming-prefix`
+- `nextfriday/enforce-sorted-destructuring`
+- `nextfriday/file-kebab-case`
+- `nextfriday/md-filename-case-restriction`
+- `nextfriday/no-complex-inline-return`
+- `nextfriday/no-direct-date`
+- `nextfriday/no-emoji`
+- `nextfriday/no-env-fallback`
+- `nextfriday/require-explicit-return-type`
+- `nextfriday/no-logic-in-params`
+- `nextfriday/no-single-char-variables`
+- `nextfriday/prefer-destructuring-params`
+- `nextfriday/prefer-function-declaration`
+- `nextfriday/prefer-import-type`
+- `nextfriday/prefer-named-param-types`
+- `nextfriday/prefer-react-import-types`
+
+### JSX Rules (7 rules)
+
+Additionally included in `react`, `react/recommended`, `nextjs`, `nextjs/recommended`:
+
+- `nextfriday/enforce-readonly-component-props`
+- `nextfriday/jsx-no-non-component-function`
+- `nextfriday/jsx-no-variable-in-callback`
+- `nextfriday/jsx-pascal-case`
+- `nextfriday/prefer-interface-over-inline-types`
+- `nextfriday/prefer-jsx-template-literals`
+- `nextfriday/react-props-destructure`
+
+### Severity Levels
+
+- **`base` / `react` / `nextjs`**: All rules set to `"warn"`
+- **`base/recommended` / `react/recommended` / `nextjs/recommended`**: All rules set to `"error"`
 
 ## Features
 
-- **File naming enforcement**: Ensure consistent file naming conventions across your project
+- **Variable naming enforcement**: Prevent cryptic single-character names and enforce boolean prefixes
+- **File naming enforcement**: Ensure consistent file naming conventions (kebab-case, PascalCase, SNAKE_CASE)
+- **Function style**: Enforce function declarations over arrow functions in utility files
 - **Import optimization**: Automatically suggests better import patterns for TypeScript
 - **Code cleanup**: Helps remove unnecessary explicit type annotations
-- **React component conventions**: Enforces naming standards for JSX/TSX files
-- **Clean code practices**: Prevents emoji usage and enforces parameter destructuring
+- **React component conventions**: Enforces naming standards and patterns for JSX/TSX files
+- **Clean code practices**: Prevents emoji usage, enforces parameter destructuring, and more
 
 ## Need Help?
 

package/docs/rules/BOOLEAN_NAMING_PREFIX.md

@@ -0,0 +1,102 @@
+# boolean-naming-prefix
+
+Enforce boolean variables and parameters to have a prefix like is, has, should, can, did, will for better readability.
+
+## Rule Details
+
+This rule enforces that boolean variables and parameters use a descriptive prefix that makes them read like English sentences. Variables like `open`, `valid`, `user` are ambiguous - it's unclear whether they represent a value or a state. Boolean prefixes make the intent clear.
+
+**Recommended prefixes:** `is`, `has`, `should`, `can`, `did`, `will`, `was`, `are`, `does`, `had`
+
+**Incorrect** code for this rule:
+
+```typescript
+const valid = true;
+const user = false;
+const open = true;
+const closed = false;
+const active: boolean = true;
+const enabled: boolean = checkEnabled();
+
+const equal = a === b;
+const different = a !== b;
+const bigger = a > b;
+const negated = !value;
+const combined = a && b;
+const either = a || b;
+
+function process(active: boolean) {}
+const fn = (enabled: boolean) => {};
+function toggle(active = true) {}
+```
+
+**Correct** code for this rule:
+
+```typescript
+const isValid = true;
+const hasUser = false;
+const isOpen = true;
+const isClosed = false;
+const isActive: boolean = true;
+const isEnabled: boolean = checkEnabled();
+
+const isEqual = a === b;
+const isDifferent = a !== b;
+const isBigger = a > b;
+const isNegated = !value;
+const areCombined = a && b;
+const hasEither = a || b;
+
+function process(isActive: boolean) {}
+const fn = (hasAccess: boolean) => {};
+function toggle(isActive = true) {}
+```
+
+## What This Rule Detects
+
+The rule identifies boolean variables and parameters by:
+
+1. **Boolean type annotations**: Variables explicitly typed as `boolean`
+2. **Boolean literals**: Variables initialized with `true` or `false`
+3. **Comparison expressions**: `===`, `!==`, `==`, `!=`, `<`, `>`, `<=`, `>=`, `in`, `instanceof`
+4. **Logical expressions**: `&&`, `||`
+5. **Negation**: `!value`
+6. **Function parameters**: With boolean type annotation or default boolean value
+
+## Allowed Prefixes
+
+| Prefix   | Usage                         | Example                                       |
+| -------- | ----------------------------- | --------------------------------------------- |
+| `is`     | State or condition            | `isActive`, `isValid`, `isLoading`            |
+| `has`    | Possession or existence       | `hasUser`, `hasPermission`, `hasError`        |
+| `can`    | Ability or permission         | `canSubmit`, `canEdit`, `canDelete`           |
+| `should` | Recommendation or expectation | `shouldRender`, `shouldUpdate`, `shouldFetch` |
+| `will`   | Future action                 | `willUpdate`, `willRedirect`, `willExpire`    |
+| `did`    | Past action                   | `didLoad`, `didSubmit`, `didFail`             |
+| `was`    | Past state                    | `wasActive`, `wasVisible`, `wasProcessed`     |
+| `are`    | Plural state                  | `areEqual`, `areValid`, `areLoaded`           |
+| `does`   | Action capability             | `doesExist`, `doesMatch`, `doesContain`       |
+| `had`    | Past possession               | `hadError`, `hadAccess`, `hadPrevious`        |
+
+## Benefits
+
+- **Self-documenting code**: Boolean intent is immediately clear
+- **Reads like English**: `if (isActive)` reads as "if is active"
+- **Reduced ambiguity**: `user = false` vs `hasUser = false` - the latter is clear
+- **Consistent codebase**: Enforces uniform boolean naming across the project
+- **Better code review**: Reviewers can quickly understand boolean logic
+
+## When Not To Use
+
+- When working with external APIs that return boolean fields with different naming conventions
+- In mathematical or scientific code where single-letter variables are conventional
+- When interfacing with legacy code that would require extensive refactoring
+
+## Configuration
+
+This rule has no configuration options.
+
+## Related Rules
+
+- [no-single-char-variables](./NO_SINGLE_CHAR_VARIABLES.md) - Disallows single character variable names
+- [@typescript-eslint/naming-convention](https://typescript-eslint.io/rules/naming-convention/) - More comprehensive naming convention rule

package/docs/rules/ENFORCE_SORTED_DESTRUCTURING.md

@@ -0,0 +1,122 @@
+# enforce-sorted-destructuring
+
+Enforce alphabetical sorting of destructured properties with defaults first.
+
+## Rule Details
+
+This rule enforces that object destructuring properties are sorted alphabetically, with properties that have default values coming first. Default values are further sorted by type (string, number, boolean, object) and then alphabetically within each type.
+
+### Why?
+
+1. **Consistency**: Alphabetical ordering makes code more predictable and easier to scan
+2. **Readability**: Sorted properties are easier to find in large destructuring statements
+3. **Organization**: Grouping defaults first keeps the destructuring organized by intent
+4. **Maintainability**: Clear structure makes it easier to add or remove properties
+
+### Sorting Order
+
+Properties are sorted in this order:
+
+1. **Properties with defaults** (sorted by type, then alphabetically):
+   - String defaults (alphabetically)
+   - Number defaults (alphabetically)
+   - Boolean defaults (alphabetically)
+   - Object/Array defaults (alphabetically)
+   - Other defaults (alphabetically)
+
+2. **Properties without defaults** (alphabetically)
+
+## Examples
+
+### ❌ Incorrect
+
+```js
+// Bad: Not sorted alphabetically
+const { d, b, a, c } = foo;
+```
+
+```js
+// Bad: Completely unsorted
+const { z, a, m } = foo;
+```
+
+```js
+// Bad: Default in the middle (should be first)
+const { a, b, d = "string", c } = foo;
+```
+
+```js
+// Bad: Non-default before defaults
+const { a, d = "string", e = 0 } = foo;
+```
+
+```js
+// Bad: Defaults not sorted by type (number before string)
+const { e = 0, d = "string", a, b } = foo;
+```
+
+```js
+// Bad: String defaults not sorted alphabetically
+const { b = "beta", a = "alpha", c } = foo;
+```
+
+```js
+// Bad: Properties reversed
+const { b, a } = foo;
+```
+
+### ✅ Correct
+
+```js
+// Good: Alphabetically sorted without defaults
+const { a, b, c, d } = foo;
+```
+
+```js
+// Good: Defaults first, sorted by type (string, number, boolean), then non-defaults
+const { d = "string", e = 0, f = true, a, b, c } = foo;
+```
+
+```js
+// Good: String defaults first (sorted alphabetically), then non-defaults
+const { a = "alpha", b = "beta", c, d } = foo;
+```
+
+```js
+// Good: Number defaults first (sorted alphabetically), then non-defaults
+const { a = 1, b = 2, c, d } = foo;
+```
+
+```js
+// Good: Boolean defaults first (sorted alphabetically), then non-defaults
+const { a = true, b = false, c, d } = foo;
+```
+
+```js
+// Good: Object defaults first (sorted alphabetically), then non-defaults
+const { a = {}, b = [], c, d } = foo;
+```
+
+```js
+// Good: Mixed default types sorted by type order, then non-defaults
+const { name = "default", age = 0, active = true, data = {}, x, y, z } = foo;
+```
+
+```js
+// Good: All defaults sorted by type and alphabetically
+const { a = "test", b = "value", c = 1, d = 2 } = foo;
+```
+
+```js
+// Good: With rest element at end
+const { a, b, ...rest } = foo;
+```
+
+## When Not To Use It
+
+If you prefer a different sorting strategy for destructured properties or don't want to enforce any particular order, you can disable this rule.
+
+## Further Reading
+
+- [Destructuring Assignment (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
+- [Default Parameters (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters)

package/docs/rules/JSX_NO_NON_COMPONENT_FUNCTION.md

@@ -0,0 +1,114 @@
+# jsx-no-non-component-function
+
+Disallow non-component functions defined at top level in .tsx and .jsx files.
+
+## Rule Details
+
+This rule prevents non-component functions from being defined at the top level in `.tsx` and `.jsx` files. These functions should either be:
+
+1. Extracted to separate files and imported
+2. Defined inside the component function if they are component-specific
+
+### Why?
+
+1. **Better Organization**: Top-level functions in component files can accumulate and make files messy and hard to maintain
+2. **Proper Separation of Concerns**: Utility/helper functions belong in separate files, not in component files
+3. **Improved Reusability**: Extracting functions to separate files makes them easier to reuse across components
+4. **Cleaner Component Files**: Component files should focus on component logic only
+
+## Examples
+
+### ❌ Incorrect
+
+```tsx
+// Bad: Non-component function defined at top level in .tsx file
+const helper = (name: string) => {
+  const words = name.trim().split(/\s+/);
+  if (words.length === 1) {
+    return words[0].charAt(0).toUpperCase();
+  }
+  return words
+    .slice(0, 2)
+    .map((word) => word.charAt(0).toUpperCase())
+    .join("");
+};
+
+const Component = () => {
+  return <div>{helper("test")}</div>;
+};
+```
+
+```tsx
+// Bad: Function declaration at top level
+function formatName(name: string) {
+  return name.toUpperCase();
+}
+
+const Component = () => {
+  return <div>{formatName("test")}</div>;
+};
+```
+
+```tsx
+// Bad: Non-component function before exported component
+const calculateTotal = (items: number[]) => {
+  return items.reduce((sum, item) => sum + item, 0);
+};
+
+export const OrderSummary = () => {
+  return <div>Total</div>;
+};
+```
+
+### ✅ Correct
+
+```tsx
+// Good: Function imported from separate file
+import { helper } from "./helper";
+
+const Component = () => {
+  return <div>{helper("test")}</div>;
+};
+```
+
+```tsx
+// Good: Function defined inside component
+const Component = () => {
+  const helper = (name: string) => {
+    return name.toUpperCase();
+  };
+
+  return <div>{helper("test")}</div>;
+};
+```
+
+```tsx
+// Good: Component only
+const Component = () => {
+  return <div>Hello</div>;
+};
+```
+
+```tsx
+// Good: Functions in .ts or .js files are allowed
+// utils.ts
+export const helper = (name: string) => {
+  return name.toUpperCase();
+};
+```
+
+```tsx
+// Good: Exported component functions are allowed
+export const Component = () => {
+  return <div>Hello</div>;
+};
+```
+
+## When Not To Use It
+
+If you prefer to keep utility/helper functions in the same file as your components, you can disable this rule. However, this may lead to less organized code and reduced reusability.
+
+## Further Reading
+
+- [React Component File Structure Best Practices](https://react.dev/learn/thinking-in-react)
+- [Separation of Concerns](https://en.wikipedia.org/wiki/Separation_of_concerns)