eslint-plugin-nextfriday 1.15.2 → 1.17.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # eslint-plugin-nextfriday
 
+## 1.17.0
+
+### Minor Changes
+
+- [#79](https://github.com/next-friday/eslint-plugin-nextfriday/pull/79) [`cb5ab46`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/cb5ab460f758e1e57f9604417b673362ec6c71d8) Thanks [@joetakara](https://github.com/joetakara)! - Add expression group to jsx-sort-props rule for variable references, member expressions, and other dynamic values
+
+## 1.16.0
+
+### Minor Changes
+
+- [#75](https://github.com/next-friday/eslint-plugin-nextfriday/pull/75) [`f506561`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/f506561c1587af4a129801dee87c7ed08154b090) Thanks [@joetakara](https://github.com/joetakara)! - feat(rules): add prefer-inline-literal-union, no-nested-interface-declaration, and enforce-type-declaration-order rules
+
 ## 1.15.2
 
 ### Patch Changes

package/README.md

@@ -48,7 +48,7 @@ export default [nextfriday.configs["nextjs/recommended"]];
 
 #### Bundled Plugin Configs
 
-Pre-configured configs for popular plugins. No extra install needed — they ship as dependencies.
+Pre-configured configs for popular plugins. No extra install needed — they ship as dependencies. These configs are arrays, so use the spread operator (`...`) to merge them into your flat config.
 
 ```js
 import nextfriday from "eslint-plugin-nextfriday";
@@ -113,7 +113,10 @@ export default [
       "nextfriday/sort-imports": "error",
 
       // Type Patterns
+      "nextfriday/enforce-type-declaration-order": "error",
+      "nextfriday/no-nested-interface-declaration": "error",
       "nextfriday/prefer-named-param-types": "error",
+      "nextfriday/prefer-inline-literal-union": "error",
       "nextfriday/prefer-interface-over-inline-types": "error",
       "nextfriday/sort-type-alphabetically": "error",
       "nextfriday/sort-type-required-first": "error",
@@ -139,34 +142,7 @@ export default [
 ];
 ```
 
-### Legacy Config (ESLint 8 and below)
-
-#### Base Legacy Configuration
-
-```js
-module.exports = {
-  plugins: ["nextfriday"],
-  extends: ["plugin:nextfriday/base"], // or "plugin:nextfriday/base/recommended"
-};
-```
-
-#### React Legacy Configuration
-
-```js
-module.exports = {
-  plugins: ["nextfriday"],
-  extends: ["plugin:nextfriday/react"], // or "plugin:nextfriday/react/recommended"
-};
-```
-
-#### Next.js Legacy Configuration
-
-```js
-module.exports = {
-  plugins: ["nextfriday"],
-  extends: ["plugin:nextfriday/nextjs"], // or "plugin:nextfriday/nextjs/recommended"
-};
-```
+> **Note:** This plugin requires ESLint 9+ and only supports the flat config format. Legacy `.eslintrc` configurations are not supported.
 
 ## Rules
 
@@ -225,7 +201,10 @@ module.exports = {
 
 | Rule                                                                                   | Description                                                      | Fixable |
 | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------- |
+| [enforce-type-declaration-order](docs/rules/ENFORCE_TYPE_DECLARATION_ORDER.md)         | Enforce referenced types are declared after their consumer       | ❌      |
+| [no-nested-interface-declaration](docs/rules/NO_NESTED_INTERFACE_DECLARATION.md)       | Disallow inline object types in interface/type properties        | ❌      |
 | [prefer-named-param-types](docs/rules/PREFER_NAMED_PARAM_TYPES.md)                     | Enforce named types for function parameters with object types    | ❌      |
+| [prefer-inline-literal-union](docs/rules/PREFER_INLINE_LITERAL_UNION.md)               | Enforce inlining literal union types for better IDE hover info   | ✅      |
 | [prefer-interface-over-inline-types](docs/rules/PREFER_INTERFACE_OVER_INLINE_TYPES.md) | Enforce interface declarations over inline types for React props | ❌      |
 | [sort-type-alphabetically](docs/rules/SORT_TYPE_ALPHABETICALLY.md)                     | Enforce A-Z sorting of properties within type groups             | ✅      |
 | [sort-type-required-first](docs/rules/SORT_TYPE_REQUIRED_FIRST.md)                     | Enforce required properties before optional in types/interfaces  | ✅      |
@@ -259,14 +238,14 @@ module.exports = {
 
 | Preset               | Severity | Base Rules | JSX Rules | Next.js Rules | Total Rules |
 | -------------------- | -------- | ---------- | --------- | ------------- | ----------- |
-| `base`               | warn     | 33         | 0         | 0             | 33          |
-| `base/recommended`   | error    | 33         | 0         | 0             | 33          |
-| `react`              | warn     | 33         | 14        | 0             | 47          |
-| `react/recommended`  | error    | 33         | 14        | 0             | 47          |
-| `nextjs`             | warn     | 33         | 14        | 1             | 48          |
-| `nextjs/recommended` | error    | 33         | 14        | 1             | 48          |
+| `base`               | warn     | 36         | 0         | 0             | 36          |
+| `base/recommended`   | error    | 36         | 0         | 0             | 36          |
+| `react`              | warn     | 36         | 14        | 0             | 50          |
+| `react/recommended`  | error    | 36         | 14        | 0             | 50          |
+| `nextjs`             | warn     | 36         | 14        | 1             | 51          |
+| `nextjs/recommended` | error    | 36         | 14        | 1             | 51          |
 
-### Base Configuration Rules (33 rules)
+### Base Configuration Rules (36 rules)
 
 Included in `base`, `base/recommended`, and all other presets:
 
@@ -276,6 +255,7 @@ Included in `base`, `base/recommended`, and all other presets:
 - `nextfriday/enforce-hook-naming`
 - `nextfriday/enforce-service-naming`
 - `nextfriday/enforce-sorted-destructuring`
+- `nextfriday/enforce-type-declaration-order`
 - `nextfriday/file-kebab-case`
 - `nextfriday/md-filename-case-restriction`
 - `nextfriday/newline-after-multiline-block`
@@ -288,6 +268,7 @@ Included in `base`, `base/recommended`, and all other presets:
 - `nextfriday/no-inline-nested-object`
 - `nextfriday/no-lazy-identifiers`
 - `nextfriday/no-logic-in-params`
+- `nextfriday/no-nested-interface-declaration`
 - `nextfriday/no-nested-ternary`
 - `nextfriday/no-relative-imports`
 - `nextfriday/no-single-char-variables`
@@ -296,6 +277,7 @@ Included in `base`, `base/recommended`, and all other presets:
 - `nextfriday/prefer-function-declaration`
 - `nextfriday/prefer-guard-clause`
 - `nextfriday/prefer-import-type`
+- `nextfriday/prefer-inline-literal-union`
 - `nextfriday/prefer-named-param-types`
 - `nextfriday/prefer-react-import-types`
 - `nextfriday/require-explicit-return-type`
@@ -345,6 +327,16 @@ Additionally included in `nextjs`, `nextjs/recommended` only:
 - **Clean code practices**: Prevents emoji usage, enforces parameter destructuring, and more
 - **Formatting rules**: Enforces consistent blank lines around multi-line blocks and return statements
 
+## Agent Skill
+
+This plugin ships with an [Agent Skill](https://github.com/anthropics/skills) that teaches AI coding assistants (Claude Code, Cursor, etc.) all 51 rules so they generate compliant code from the start.
+
+```bash
+npx skills add next-friday/eslint-plugin-nextfriday --skill eslint-plugin-nextfriday
+```
+
+Once installed, AI assistants will automatically follow the naming, code style, type, JSX, import, and formatting patterns enforced by this plugin — reducing lint errors to zero.
+
 ## Need Help?
 
 If you encounter any issues or have questions:
@@ -354,4 +346,4 @@ If you encounter any issues or have questions:
 
 ## License
 
-MIT - feel free to use this plugin in your projects!
+MIT

package/docs/rules/BOOLEAN_NAMING_PREFIX.md

@@ -8,9 +8,11 @@ This rule enforces that boolean variables and parameters use a descriptive prefi
 
 **Recommended prefixes:** `is`, `has`, `should`, `can`, `did`, `will`, `was`, `are`, `does`, `had`
 
-**Incorrect** code for this rule:
+## Examples
 
-```typescript
+### Incorrect
+
+```ts
 const valid = true;
 const user = false;
 const open = true;
@@ -30,9 +32,9 @@ const fn = (enabled: boolean) => {};
 function toggle(active = true) {}
 ```
 
-**Correct** code for this rule:
+### Correct
 
-```typescript
+```ts
 const isValid = true;
 const hasUser = false;
 const isOpen = true;
@@ -78,24 +80,12 @@ The rule identifies boolean variables and parameters by:
 | `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 Not To Use It
 
 - 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

package/docs/rules/ENFORCE_CONSTANT_CASE.md

@@ -4,19 +4,13 @@ Enforce SCREAMING_SNAKE_CASE for constant primitive values.
 
 ## Rule Details
 
-This rule ensures that `const` declarations with primitive values (strings, numbers, booleans, template literals) use SCREAMING_SNAKE_CASE naming convention.
-
-### Why?
-
-- **Clarity**: SCREAMING_SNAKE_CASE clearly indicates a value is a constant that shouldn't change
-- **Convention**: Follows common JavaScript/TypeScript naming patterns for constants
-- **Readability**: Makes it easy to distinguish constants from regular variables
+This rule ensures that `const` declarations with primitive values (strings, numbers, booleans, template literals) use SCREAMING_SNAKE_CASE naming convention. Objects, arrays, and functions are not checked. Only `const` declarations are checked; `let` and `var` are ignored.
 
 ## Examples
 
-### ❌ Incorrect
+### Incorrect
 
-```typescript
+```ts
 const defaultCover = "/images/default.jpg";
 const pageLimit = 10;
 const isEnabled = true;
@@ -24,9 +18,9 @@ const apiBaseUrl = "https://api.example.com";
 const template = `hello world`;
 ```
 
-### ✅ Correct
+### Correct
 
-```typescript
+```ts
 const DEFAULT_COVER = "/images/default.jpg";
 const PAGE_LIMIT = 10;
 const IS_ENABLED = true;
@@ -47,10 +41,3 @@ var pageLimit = 10;
 
 - If your project uses different naming conventions for constants
 - If you prefer camelCase for all variable declarations
-
-## Notes
-
-- Only applies to `const` declarations
-- Only applies to primitive values: strings, numbers, booleans, template literals
-- Objects, arrays, and functions are not checked (can use camelCase/PascalCase)
-- `let` and `var` declarations are not checked

package/docs/rules/ENFORCE_CURLY_NEWLINE.md

@@ -13,9 +13,9 @@ This rule manages curly braces for `IfStatement` based on visual layout (line br
 
 ## Examples
 
-### ❌ Incorrect
+### Incorrect
 
-```tsx
+```ts
 // Single-line with braces (BAD)
 if (!data) {
   return [];
@@ -30,9 +30,9 @@ if (veryLongCondition && anotherCondition) return [];
 if (condition) doSomething();
 ```
 
-### ✅ Correct
+### Correct
 
-```tsx
+```ts
 // Single-line without braces (GOOD)
 if (!data) return [];
 if (x > 0) doSomething();

package/docs/rules/ENFORCE_HOOK_NAMING.md

@@ -4,7 +4,7 @@ Enforce `use` prefix for functions in custom hook files (`*.hook.ts`, `*.hooks.t
 
 ## Rule Details
 
-This rule ensures that all exported functions in custom hook files follow React's hook naming convention by starting with `use`.
+This rule ensures that all exported functions in custom hook files (`*.hook.ts`, `*.hooks.ts`) follow React's hook naming convention by starting with `use`.
 
 ### Why?
 
@@ -14,9 +14,9 @@ This rule ensures that all exported functions in custom hook files follow React'
 
 ## Examples
 
-### ❌ Incorrect
+### Incorrect
 
-```typescript
+```ts
 // search-params.hook.ts
 export function searchParamsHandler() {}
 export default handleSearch;
@@ -26,9 +26,9 @@ export const authManager = () => {};
 export default function customHook() {}
 ```
 
-### ✅ Correct
+### Correct
 
-```typescript
+```ts
 // search-params.hook.ts
 export function useSearchParamsHandler() {}
 export default useSearchParamsHandler;
@@ -42,10 +42,3 @@ export default function useCustomHook() {}
 
 - If your project uses a different naming convention for hook files
 - If you don't use the `*.hook.ts` or `*.hooks.ts` file naming pattern
-
-## Applies To
-
-This rule only applies to files matching:
-
-- `*.hook.ts`
-- `*.hooks.ts`

package/docs/rules/ENFORCE_PROPS_SUFFIX.md

@@ -4,17 +4,11 @@ Enforce `Props` suffix for interfaces and types in component files (`*.tsx`, `*.
 
 ## Rule Details
 
-This rule ensures that all interfaces and object type aliases in React component files end with the `Props` suffix for consistency and clarity.
-
-### Why?
-
-- **Clarity**: Clearly identifies types that represent component props
-- **Consistency**: Standardizes naming across all component files
-- **Convention**: Follows common React/TypeScript naming patterns
+This rule ensures that all interfaces and object type aliases in React component files (`.tsx`, `.jsx`) end with the `Props` suffix. Only interfaces and type aliases with object literal types are checked; union types, function types, and type references are not affected.
 
 ## Examples
 
-### ❌ Incorrect
+### Incorrect
 
 ```tsx
 // Button.tsx
@@ -25,7 +19,7 @@ interface Card {
 type ButtonType = { disabled: boolean };
 ```
 
-### ✅ Correct
+### Correct
 
 ```tsx
 // Button.tsx
@@ -46,15 +40,3 @@ type ButtonState = SomeOtherType;
 
 - If your project uses different naming conventions for prop types
 - If you have utility types in component files that shouldn't end with `Props`
-
-## Applies To
-
-This rule only applies to files with extensions:
-
-- `.tsx`
-- `.jsx`
-
-## Notes
-
-- Only interfaces and type aliases with object literal types are checked
-- Union types, function types, and type references are not affected

package/docs/rules/ENFORCE_READONLY_COMPONENT_PROPS.md

@@ -8,7 +8,7 @@ This rule enforces that React component props using named types (interfaces or t
 
 ## Examples
 
-### ❌ Incorrect
+### Incorrect
 
 ```tsx
 interface Props {
@@ -35,7 +35,7 @@ function Layout(props: LayoutProps) {
 }
 ```
 
-### ✅ Correct
+### Correct
 
 ```tsx
 interface Props {
@@ -77,7 +77,7 @@ const helper = (props: HelperProps) => {
 };
 ```
 
-## When Not To Use
+## When Not To Use It
 
 This rule should not be used if:
 
@@ -93,12 +93,3 @@ This rule is fixable using ESLint's `--fix` option. The fixer will automatically
 
 - [`prefer-interface-over-inline-types`](./PREFER_INTERFACE_OVER_INLINE_TYPES.md) - Enforces interface declarations over inline types
 - [`react-props-destructure`](./REACT_PROPS_DESTRUCTURE.md) - Enforces destructuring props inside component body
-
-## Configuration
-
-This rule is included in the following configurations:
-
-- `react` (warn)
-- `react/recommended` (error)
-- `nextjs` (warn)
-- `nextjs/recommended` (error)

package/docs/rules/ENFORCE_SERVICE_NAMING.md

@@ -4,7 +4,7 @@ Enforce `fetch` prefix for async functions in `*.service.ts` files instead of `g
 
 ## Rule Details
 
-This rule ensures consistent naming conventions for service layer functions. In service files, async data-fetching functions should use the `fetch` prefix to clearly indicate they perform network/API calls.
+This rule ensures consistent naming conventions for service layer functions. In `*.service.ts` files, async data-fetching functions should use the `fetch` prefix to clearly indicate they perform network/API calls.
 
 ### Why?
 
@@ -14,9 +14,9 @@ This rule ensures consistent naming conventions for service layer functions. In
 
 ## Examples
 
-### ❌ Incorrect
+### Incorrect
 
-```typescript
+```ts
 // article.service.ts
 export async function getArticles() {}
 export async function loadFaq() {}
@@ -24,9 +24,9 @@ export async function getUserById() {}
 export const getUsers = async () => {};
 ```
 
-### ✅ Correct
+### Correct
 
-```typescript
+```ts
 // article.service.ts
 export async function fetchArticles() {}
 export async function fetchFaqList() {}
@@ -46,7 +46,3 @@ export async function deleteComment() {}
 
 - If your project uses different naming conventions for service functions
 - If you prefer `get`/`load` prefixes for data-fetching operations
-
-## Applies To
-
-This rule only applies to files matching `*.service.ts`.

package/docs/rules/ENFORCE_SORTED_DESTRUCTURING.md

@@ -24,7 +24,7 @@ Properties are sorted in this order:
 
 ## Examples
 
-### ❌ Incorrect
+### Incorrect
 
 ```js
 // Bad: Not sorted alphabetically
@@ -66,7 +66,7 @@ const { b, a } = foo;
 const { duration = 5000, autoplay = false, totalSlides } = options;
 ```
 
-### ✅ Correct
+### Correct
 
 ```js
 // Good: Alphabetically sorted without defaults

package/docs/rules/ENFORCE_TYPE_DECLARATION_ORDER.md

@@ -0,0 +1,87 @@
+# enforce-type-declaration-order
+
+Enforce that referenced types and interfaces are declared after the type that uses them.
+
+## Rule Details
+
+This rule enforces a top-down reading order for type declarations. When an interface or type references another locally-declared type, the referenced (dependency) type must appear _after_ the consumer. This ensures the "main" type is read first, with its supporting types following below.
+
+### Why?
+
+1. **Top-down readability**: The primary type appears first, making it easy to understand the high-level structure before drilling into details
+2. **Consistency**: A uniform ordering convention eliminates debates about where to place types
+3. **Natural flow**: Mirrors how you'd explain a data structure - start with the big picture, then define the parts
+
+## Examples
+
+### Incorrect
+
+```ts
+// Dependency declared before consumer
+interface Baz {
+  baz: string;
+}
+
+interface Foo {
+  bar: Baz;
+}
+```
+
+```ts
+type Config = {
+  theme: string;
+};
+
+type Props = {
+  config: Config;
+};
+```
+
+### Correct
+
+```ts
+// Consumer first, dependency after
+interface Foo {
+  bar: Baz;
+}
+
+interface Baz {
+  baz: string;
+}
+```
+
+```ts
+type Props = {
+  config: Config;
+};
+
+type Config = {
+  theme: string;
+};
+```
+
+```ts
+// Chain of dependencies in top-down order
+interface Parent {
+  child: Child;
+}
+
+interface Child {
+  grandchild: Grandchild;
+}
+
+interface Grandchild {
+  value: string;
+}
+```
+
+```ts
+// External/imported types are ignored (not locally declared)
+interface Props {
+  items: ExternalType[];
+}
+```
+
+## When Not To Use It
+
+If you prefer declaring dependency types before the types that reference them (bottom-up order), or if you don't want to enforce any particular declaration order, you can disable this rule.

package/docs/rules/FILE_KEBAB_CASE.md

@@ -4,13 +4,13 @@ Enforce kebab-case filenames for .ts and .js files.
 
 ## Rule Details
 
-This rule enforces that all TypeScript (.ts) and JavaScript (.js) files use kebab-case naming convention for their **filenames**. Kebab-case uses lowercase letters and hyphens to separate words, making filenames more consistent and URL-friendly.
+This rule enforces that all TypeScript (.ts) and JavaScript (.js) files use kebab-case naming convention for their **filenames**. Kebab-case uses lowercase letters and hyphens to separate words, making filenames more consistent and URL-friendly. Single word filenames are considered valid kebab-case.
 
-**This rule checks the filename, not the code content.**
+**This rule checks the filename, not the code content.** Only `.ts` and `.js` files are checked; other file types are ignored.
 
 ## Examples
 
-**Incorrect** filenames for this rule:
+### Incorrect
 
 - `MyFile.ts` (PascalCase)
 - `camelCase.js` (camelCase)
@@ -19,7 +19,7 @@ This rule enforces that all TypeScript (.ts) and JavaScript (.js) files use keba
 - `UPPERCASE.ts` (UPPERCASE)
 - `My File.js` (contains spaces)
 
-**Correct** filenames for this rule:
+### Correct
 
 - `my-file.ts`
 - `kebab-case.js`
@@ -28,56 +28,6 @@ This rule enforces that all TypeScript (.ts) and JavaScript (.js) files use keba
 - `user-service.ts`
 - `api-utils.ts`
 
-## Code Examples
-
-The content of the file doesn't matter - only the filename is checked:
-
-```typescript
-// INCORRECT: File: MyFile.ts (incorrect filename)
-function myFunction() {
-  return "Hello World";
-}
-
-export { myFunction };
-```
-
-```typescript
-// CORRECT: File: my-file.ts (correct filename)
-function myFunction() {
-  return "Hello World";
-}
-
-export { myFunction };
-```
-
-```javascript
-// INCORRECT: File: UserService.js (incorrect filename)
-class UserService {
-  getUser() {
-    return {};
-  }
-}
-
-export { UserService };
-```
-
-```javascript
-// CORRECT: File: user-service.js (correct filename)
-class UserService {
-  getUser() {
-    return {};
-  }
-}
-
-export { UserService };
-```
-
 ## When Not To Use It
 
 If your project has established naming conventions that conflict with kebab-case, or if you're working with frameworks that require specific filename patterns, you may want to disable this rule.
-
-## Notes
-
-- This rule only applies to `.ts` and `.js` files
-- Other file types (`.jsx`, `.tsx`, `.json`, etc.) are ignored
-- Single word filenames are considered valid kebab-case

package/docs/rules/JSX_NEWLINE_BETWEEN_ELEMENTS.md

@@ -6,9 +6,9 @@ Require empty lines between sibling JSX elements when at least one spans multipl
 
 This rule enforces empty lines between sibling JSX elements when either element spans multiple lines. This improves visual separation and readability of complex component structures. Single-line elements do not require empty lines between them.
 
-### Examples
+## Examples
 
-#### Incorrect
+### Incorrect
 
 ```jsx
 function Dashboard() {
@@ -37,7 +37,7 @@ function UserProfile() {
 }
 ```
 
-#### Correct
+### Correct
 
 Multi-line elements need empty lines between them:
 

package/docs/rules/JSX_NO_INLINE_OBJECT_PROP.md

@@ -14,7 +14,7 @@ This rule flags inline object literals used directly as JSX prop values. Inline
 
 ## Examples
 
-### ❌ Incorrect
+### Incorrect
 
 ```tsx
 <Component style={{ color: "red" }} />
@@ -23,7 +23,7 @@ This rule flags inline object literals used directly as JSX prop values. Inline
 <div style={{ margin: 0 }} />
 ```
 
-### ✅ Correct
+### Correct
 
 ```tsx
 const style = { color: "red" };