eslint-plugin-nextfriday 1.16.0 → 1.18.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # eslint-plugin-nextfriday
 
+## 1.18.0
+
+### Minor Changes
+
+- [#81](https://github.com/next-friday/eslint-plugin-nextfriday/pull/81) [`081326a`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/081326adf199aee711e97b1627def3bf867ad89c) Thanks [@joetakara](https://github.com/joetakara)! - Add hyphenated string group to jsx-sort-props for props like aria-label and data-slot. Fix jsx-newline-between-elements to include self-closing elements
+
+## 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

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";
@@ -142,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
 
@@ -354,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:
@@ -363,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/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" };

package/docs/rules/JSX_NO_NEWLINE_SINGLE_LINE_ELEMENTS.md

@@ -2,6 +2,8 @@
 
 Disallow empty lines between single-line sibling JSX elements.
 
+> This rule is auto-fixable using `--fix`.
+
 ## Rule Details
 
 This rule enforces that sibling JSX elements which are both single-line should not have empty lines between them. Single-line elements should be compact and grouped together.
@@ -16,7 +18,7 @@ Use with `jsx-newline-between-elements` which requires empty lines between multi
 
 ## Examples
 
-### ❌ Incorrect
+### Incorrect
 
 ```tsx
 // Bad: Unnecessary empty line between single-line siblings
@@ -38,7 +40,7 @@ Use with `jsx-newline-between-elements` which requires empty lines between multi
 </ul>
 ```
 
-### ✅ Correct
+### Correct
 
 ```tsx
 // Good: Single-line siblings are compact

package/docs/rules/JSX_NO_NON_COMPONENT_FUNCTION.md

@@ -18,7 +18,7 @@ This rule prevents non-component functions from being defined at the top level i
 
 ## Examples
 
-### ❌ Incorrect
+### Incorrect
 
 ```tsx
 // Bad: Non-component function defined at top level in .tsx file
@@ -62,7 +62,7 @@ const OrderSummary = () => {
 export { OrderSummary };
 ```
 
-### ✅ Correct
+### Correct
 
 ```tsx
 // Good: Function imported from separate file
@@ -91,7 +91,7 @@ const Component = () => {
 };
 ```
 
-```typescript
+```ts
 // Good: Functions in .ts or .js files are allowed
 // utils.ts
 function helper(name: string) {

package/docs/rules/JSX_NO_VARIABLE_IN_CALLBACK.md

@@ -15,7 +15,7 @@ This rule prevents variable declarations inside callback functions that are dire
 
 ## Examples
 
-### ❌ Incorrect
+### Incorrect
 
 ```tsx
 // Bad: Variable declared inside map callback in JSX
@@ -61,7 +61,7 @@ const OrderSummary = ({ orders }) => {
 };
 ```
 
-### ✅ Correct
+### Correct
 
 ```tsx
 // Good: Extract logic to a separate function

package/docs/rules/JSX_PASCAL_CASE.md

@@ -10,7 +10,7 @@ This rule enforces that JSX and TSX files use PascalCase naming convention for t
 
 ## Examples
 
-**Incorrect** filenames for this rule:
+### Incorrect
 
 - `my-component.jsx` (kebab-case)
 - `userProfile.jsx` (camelCase)
@@ -20,7 +20,7 @@ This rule enforces that JSX and TSX files use PascalCase naming convention for t
 - `My Component.jsx` (contains spaces)
 - `My.Component.tsx` (contains dots)
 
-**Correct** filenames for this rule:
+### Correct
 
 - `MyComponent.jsx`
 - `UserProfile.tsx`
@@ -28,47 +28,7 @@ This rule enforces that JSX and TSX files use PascalCase naming convention for t
 - `LoginForm.tsx`
 - `UserProfile2.jsx` (PascalCase with numbers)
 
-## Code Examples
-
-The content of the file doesn't matter - only the filename is checked:
-
-```jsx
-// INCORRECT: File: my-component.jsx (incorrect filename)
-function MyComponent() {
-  return <div>Hello</div>;
-}
-
-export default MyComponent;
-```
-
-```jsx
-// CORRECT: File: MyComponent.jsx (correct filename)
-function MyComponent() {
-  return <div>Hello</div>;
-}
-
-export default MyComponent;
-```
-
-```tsx
-// INCORRECT: File: user-profile.tsx (incorrect filename)
-function UserProfile() {
-  return <div>Profile</div>;
-}
-
-export default UserProfile;
-```
-
-```tsx
-// CORRECT: File: UserProfile.tsx (correct filename)
-function UserProfile() {
-  return <div>Profile</div>;
-}
-
-export default UserProfile;
-```
-
-## When Not To Use
+## When Not To Use It
 
 If your project uses different naming conventions for JSX/TSX files, you can disable this rule.
 

package/docs/rules/JSX_REQUIRE_SUSPENSE.md

@@ -14,7 +14,7 @@ This rule ensures that components created with `lazy()` or `React.lazy()` are al
 
 ## Examples
 
-### ❌ Incorrect
+### Incorrect
 
 ```tsx
 const AsyncComponent = lazy(() => import("./Component"));
@@ -29,7 +29,7 @@ const LazyModal = React.lazy(() => import("./Modal"));
 </div>
 ```
 
-### ✅ Correct
+### Correct
 
 ```tsx
 const AsyncComponent = lazy(() => import("./Component"));