eslint-plugin-nextfriday 1.20.0 → 1.22.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # eslint-plugin-nextfriday
 
+## 1.22.0
+
+### Minor Changes
+
+- [#92](https://github.com/next-friday/eslint-plugin-nextfriday/pull/92) [`432b4b4`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/432b4b49cabc0d6ea9289441b13e7442d328614f) Thanks [@joetakara](https://github.com/joetakara)! - Rework enforce-service-naming rule to ban misleading prefixes (set, delete, do, handle) instead of forcing fetch prefix. Allow single-property inline nested objects in no-inline-nested-object rule. Fix documentation inconsistencies across README, rule docs, and configuration presets. Update dependencies to resolve security vulnerabilities.
+
+## 1.21.0
+
+### Minor Changes
+
+- [#87](https://github.com/next-friday/eslint-plugin-nextfriday/pull/87) [`ed401e3`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/ed401e39db04857995ddcc29d7444298181ee60b) Thanks [@joetakara](https://github.com/joetakara)! - Add `no-inline-return-properties` rule that enforces shorthand-only properties in return objects
+
+- [#90](https://github.com/next-friday/eslint-plugin-nextfriday/pull/90) [`d5e9db5`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/d5e9db562cb9e38beadd59da39f8618b6f5825ed) Thanks [@joetakara](https://github.com/joetakara)! - Add comprehensive naming convention rules and fix prefer-import-type JSX prop bug
+  - Add `enforce-camel-case` rule: ban snake_case variables/functions, restrict PascalCase to React components
+  - Add `enforce-property-case` rule: enforce camelCase for unquoted object property keys
+  - Refactor `enforce-constant-case` to only check global scope, support RegExp/objects/arrays/as const
+  - Refactor `no-misleading-constant-case` to flag SCREAMING_SNAKE_CASE in local scope
+  - Fix `prefer-import-type` incorrectly converting imports used as JSX prop values to type imports
+
 ## 1.20.0
 
 ### Minor Changes

package/README.md

@@ -78,12 +78,14 @@ export default [
       "nextfriday/no-single-char-variables": "error",
       "nextfriday/no-lazy-identifiers": "error",
       "nextfriday/boolean-naming-prefix": "error",
+      "nextfriday/enforce-camel-case": "error",
       "nextfriday/enforce-constant-case": "error",
+      "nextfriday/enforce-property-case": "error",
+      "nextfriday/no-misleading-constant-case": "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",
@@ -97,9 +99,11 @@ export default [
       "nextfriday/enforce-sorted-destructuring": "error",
       "nextfriday/no-env-fallback": "error",
       "nextfriday/no-inline-default-export": "error",
+      "nextfriday/no-direct-date": "error",
       "nextfriday/newline-after-multiline-block": "error",
       "nextfriday/newline-before-return": "error",
       "nextfriday/no-inline-nested-object": "error",
+      "nextfriday/no-inline-return-properties": "error",
       "nextfriday/prefer-async-await": "error",
       "nextfriday/enforce-curly-newline": "error",
       "nextfriday/no-nested-ternary": "error",
@@ -155,16 +159,17 @@ export default [
 | [no-single-char-variables](docs/rules/NO_SINGLE_CHAR_VARIABLES.md)       | Disallow single character variable names (e.g., `d`, `u`, `l`)        | ❌      |
 | [no-lazy-identifiers](docs/rules/NO_LAZY_IDENTIFIERS.md)                 | Disallow lazy identifiers like `xxx`, `asdf`, `qwerty`                | ❌      |
 | [boolean-naming-prefix](docs/rules/BOOLEAN_NAMING_PREFIX.md)             | Enforce boolean variables to have prefix (is, has, should, can, etc.) | ❌      |
-| [enforce-constant-case](docs/rules/ENFORCE_CONSTANT_CASE.md)             | Enforce SCREAMING_SNAKE_CASE for static constant primitive values     | ❌      |
-| [no-misleading-constant-case](docs/rules/NO_MISLEADING_CONSTANT_CASE.md) | Disallow SCREAMING_SNAKE_CASE for non-constant or non-static values   | ❌      |
+| [enforce-camel-case](docs/rules/ENFORCE_CAMEL_CASE.md)                   | Ban snake_case and restrict PascalCase to React components            | ❌      |
+| [enforce-constant-case](docs/rules/ENFORCE_CONSTANT_CASE.md)             | Enforce SCREAMING_SNAKE_CASE for global static constant values        | ❌      |
+| [enforce-property-case](docs/rules/ENFORCE_PROPERTY_CASE.md)             | Enforce camelCase for unquoted object property keys                   | ❌      |
+| [no-misleading-constant-case](docs/rules/NO_MISLEADING_CONSTANT_CASE.md) | Disallow SCREAMING_SNAKE_CASE in local scope and for dynamic values   | ❌      |
 
 ### File Naming Rules
 
-| 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           | ❌      |
+| 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 | ❌      |
 
 ### Code Style Rules
 
@@ -185,6 +190,7 @@ export default [
 | [newline-after-multiline-block](docs/rules/NEWLINE_AFTER_MULTILINE_BLOCK.md) | Require a blank line after multi-line statements                       | ✅      |
 | [newline-before-return](docs/rules/NEWLINE_BEFORE_RETURN.md)                 | Require a blank line before return statements                          | ✅      |
 | [no-inline-nested-object](docs/rules/NO_INLINE_NESTED_OBJECT.md)             | Require nested objects and arrays to span multiple lines               | ✅      |
+| [no-inline-return-properties](docs/rules/NO_INLINE_RETURN_PROPERTIES.md)     | Require return object properties to use shorthand notation             | ❌      |
 | [prefer-async-await](docs/rules/PREFER_ASYNC_AWAIT.md)                       | Enforce async/await over .then() promise chains                        | ❌      |
 | [enforce-curly-newline](docs/rules/ENFORCE_CURLY_NEWLINE.md)                 | Enforce curly braces for multi-line if, forbid for single-line         | ✅      |
 | [no-nested-ternary](docs/rules/NO_NESTED_TERNARY.md)                         | Disallow nested ternary expressions                                    | ❌      |
@@ -243,26 +249,27 @@ export default [
 
 | Preset               | Severity | Base Rules | JSX Rules | Next.js Rules | Total Rules |
 | -------------------- | -------- | ---------- | --------- | ------------- | ----------- |
-| `base`               | warn     | 37         | 0         | 0             | 37          |
-| `base/recommended`   | error    | 37         | 0         | 0             | 37          |
-| `react`              | warn     | 37         | 15        | 0             | 52          |
-| `react/recommended`  | error    | 37         | 15        | 0             | 52          |
-| `nextjs`             | warn     | 37         | 15        | 1             | 53          |
-| `nextjs/recommended` | error    | 37         | 15        | 1             | 53          |
+| `base`               | warn     | 40         | 0         | 0             | 40          |
+| `base/recommended`   | error    | 40         | 0         | 0             | 40          |
+| `react`              | warn     | 40         | 15        | 0             | 55          |
+| `react/recommended`  | error    | 40         | 15        | 0             | 55          |
+| `nextjs`             | warn     | 40         | 15        | 1             | 56          |
+| `nextjs/recommended` | error    | 40         | 15        | 1             | 56          |
 
-### Base Configuration Rules (37 rules)
+### Base Configuration Rules (40 rules)
 
 Included in `base`, `base/recommended`, and all other presets:
 
 - `nextfriday/boolean-naming-prefix`
+- `nextfriday/enforce-camel-case`
 - `nextfriday/enforce-constant-case`
 - `nextfriday/enforce-curly-newline`
 - `nextfriday/enforce-hook-naming`
+- `nextfriday/enforce-property-case`
 - `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`
 - `nextfriday/newline-before-return`
 - `nextfriday/no-complex-inline-return`
@@ -271,8 +278,10 @@ Included in `base`, `base/recommended`, and all other presets:
 - `nextfriday/no-env-fallback`
 - `nextfriday/no-inline-default-export`
 - `nextfriday/no-inline-nested-object`
+- `nextfriday/no-inline-return-properties`
 - `nextfriday/no-lazy-identifiers`
 - `nextfriday/no-logic-in-params`
+- `nextfriday/no-misleading-constant-case`
 - `nextfriday/no-nested-interface-declaration`
 - `nextfriday/no-nested-ternary`
 - `nextfriday/no-relative-imports`
@@ -336,7 +345,7 @@ Additionally included in `nextjs`, `nextjs/recommended` only:
 
 ## Agent Skill
 
-This plugin ships with an [Agent Skill](https://github.com/anthropics/skills) that teaches AI coding assistants (Claude Code, Cursor, etc.) all 53 rules so they generate compliant code from the start.
+This plugin ships with an [Agent Skill](https://github.com/anthropics/skills) that teaches AI coding assistants (Claude Code, Cursor, etc.) all 56 rules so they generate compliant code from the start.
 
 ```bash
 npx skills add next-friday/eslint-plugin-nextfriday --skill eslint-plugin-nextfriday

package/docs/rules/ENFORCE_CAMEL_CASE.md

@@ -0,0 +1,68 @@
+# enforce-camel-case
+
+Enforce camelCase for variables and functions, ban snake_case, and restrict PascalCase to React components.
+
+## Rule Details
+
+This rule enforces consistent naming conventions across your codebase:
+
+- Variables and functions must use camelCase
+- snake_case is banned for all variable and function declarations
+- PascalCase is reserved exclusively for React components (functions that return JSX)
+
+Global static constants are not checked by this rule. Use `enforce-constant-case` for those.
+
+### Why?
+
+Consistent naming conventions reduce cognitive load. When PascalCase is reserved for components and camelCase is used for everything else, the name alone tells you what something is.
+
+## Examples
+
+### Incorrect
+
+```ts
+// snake_case variables
+let current_index = 0;
+const first_name = "John";
+
+// snake_case functions
+function calculate_total() {
+  return 0;
+}
+
+// PascalCase for non-component functions
+const CalculateTotal = () => 0;
+const FormatDate = (date: string) => date;
+```
+
+### Correct
+
+```ts
+// camelCase variables
+let currentIndex = 0;
+const firstName = "John";
+
+// camelCase functions
+function calculateTotal() { return 0; }
+const formatDate = (date: string) => date;
+
+// PascalCase for React components
+const ArticleCard = () => <div />;
+const WrappedComponent = memo(() => <div />);
+const LazyPage = lazy(() => import("./Page"));
+```
+
+## Exceptions
+
+- Global static constants (handled by `enforce-constant-case`)
+- SCREAMING_SNAKE_CASE variables (handled by `no-misleading-constant-case`)
+- React components wrapped with `memo`, `forwardRef`, or `lazy`
+
+## When Not To Use It
+
+If your project does not follow the convention that PascalCase is reserved for React components.
+
+## Related Rules
+
+- [enforce-constant-case](ENFORCE_CONSTANT_CASE.md) - Enforces SCREAMING_SNAKE_CASE for global static constants
+- [no-misleading-constant-case](NO_MISLEADING_CONSTANT_CASE.md) - Disallows SCREAMING_SNAKE_CASE in local scope

package/docs/rules/ENFORCE_CONSTANT_CASE.md

@@ -1,10 +1,12 @@
 # enforce-constant-case
 
-Enforce SCREAMING_SNAKE_CASE for constant primitive values.
+Enforce SCREAMING_SNAKE_CASE for global constant static values.
 
 ## Rule Details
 
-This rule ensures that `const` declarations with static primitive values (strings, numbers, booleans, static template literals) use SCREAMING_SNAKE_CASE naming convention. Template literals with expressions (e.g., `` `${variable}` ``) are considered dynamic and are not checked. Objects, arrays, and functions are not checked. Only `const` declarations are checked; `let` and `var` are ignored.
+This rule ensures that global-scope `const` declarations with static values use SCREAMING_SNAKE_CASE naming convention. Static values include: string/number/boolean literals, RegExp, static template literals, `as const` assertions, and objects/arrays containing only literal values.
+
+Only global scope (top-level of a file) is checked. Local scope constants inside functions are not checked by this rule.
 
 ## Examples
 
@@ -15,6 +17,9 @@ const defaultCover = "/images/default.jpg";
 const pageLimit = 10;
 const apiBaseUrl = "https://api.example.com";
 const template = `hello world`;
+const phoneRegex = /^[0-9]{10}$/;
+const default_theme = "dark";
+export const categories = [{ id: "1" }] as const;
 ```
 
 ### Correct
@@ -24,27 +29,37 @@ const DEFAULT_COVER = "/images/default.jpg";
 const PAGE_LIMIT = 10;
 const API_BASE_URL = "https://api.example.com";
 const TEMPLATE = `hello world`;
+const PHONE_REGEX = /^[0-9]{10}$/;
+const DEFAULT_THEME = "dark";
+export const CATEGORIES = [{ id: "1" }] as const;
+
+const SKELETON_ITEMS = [1, 2, 3, 4, 5];
+const MAP_STYLE = { height: "320px", width: "100%" };
+const STATUS_MAP = { ACTIVE: "active" } as const;
 
-// Booleans with standard prefixes (is, has, should, can, etc.) are exempt
-const isEnabled = true;
+// Booleans with standard prefixes (is, has, should, etc.) are exempt
+const isProduction = true;
 const hasAccess = false;
-const shouldRender = true;
 
 // Template literals with expressions are dynamic, camelCase is fine
 const pendingHref = `/branch/${branch.branchNumber}`;
-const greeting = `Hello, ${user.name}!`;
 
-// Objects, arrays, and functions can use camelCase
-const config = { key: "value" };
-const items = [1, 2, 3];
+// Functions and components are not checked
 const handleClick = () => {};
+const MyComponent = () => {};
 
-// Let and var declarations are not checked
-let defaultCover = "/images/default.jpg";
-var pageLimit = 10;
+// Local scope is not checked
+function foo() {
+  const maxRetry = 3;
+}
 ```
 
 ## When Not To Use It
 
 - If your project uses different naming conventions for constants
 - If you prefer camelCase for all variable declarations
+
+## Related Rules
+
+- [no-misleading-constant-case](NO_MISLEADING_CONSTANT_CASE.md) - Disallows SCREAMING_SNAKE_CASE in local scope and for dynamic values
+- [enforce-camel-case](ENFORCE_CAMEL_CASE.md) - Enforces camelCase for variables and functions

package/docs/rules/ENFORCE_CURLY_NEWLINE.md

@@ -16,35 +16,29 @@ This rule manages curly braces for `IfStatement` based on visual layout (line br
 ### Incorrect
 
 ```ts
-// Single-line with braces (BAD)
 if (!data) {
   return [];
 }
 if (x > 0) {
   doSomething();
 }
+```
 
-// Multi-line without braces (BAD)
+```ts
 if (veryLongCondition && anotherCondition) return [];
-
-if (condition) doSomething();
 ```
 
 ### Correct
 
 ```ts
-// Single-line without braces (GOOD)
 if (!data) return [];
 if (x > 0) doSomething();
+```
 
-// Multi-line with braces (GOOD)
+```ts
 if (veryLongCondition && anotherCondition) {
   return [];
 }
-
-if (condition) {
-  doSomething();
-}
 ```
 
 ## Auto-Fix

package/docs/rules/ENFORCE_PROPERTY_CASE.md

@@ -0,0 +1,63 @@
+# enforce-property-case
+
+Enforce camelCase for unquoted object property keys.
+
+## Rule Details
+
+This rule bans snake_case and SCREAMING_SNAKE_CASE for unquoted object property keys. Quoted keys (string literals) are allowed for API boundaries where external systems require different conventions.
+
+### Why?
+
+Object properties should follow the same camelCase convention as variables. When an external API requires snake_case keys, wrapping them in quotes makes it explicit that the naming is intentional and driven by an external contract.
+
+## Examples
+
+### Incorrect
+
+```ts
+const userPayload = {
+  first_name: "John",
+  last_name: "Doe",
+};
+
+const item = {
+  ITEM_ID: 1,
+};
+```
+
+### Correct
+
+```ts
+// camelCase properties
+const userPayload = {
+  firstName: "John",
+  lastName: "Doe",
+};
+
+// Quoted keys for API boundaries
+const apiPayload = {
+  first_name: "John",
+  last_name: "Doe",
+};
+
+// as const objects are exempt (enum-like pattern)
+const STATUS_MAP = {
+  ACTIVE: "active",
+  INACTIVE: "inactive",
+} as const;
+```
+
+## Exceptions
+
+- Quoted property keys (`"first_name"`) are always allowed
+- Computed property keys (`[key]`) are not checked
+- Properties inside `as const` objects and arrays are exempt
+
+## When Not To Use It
+
+If your project frequently uses snake_case or SCREAMING_SNAKE_CASE for object properties without quoting.
+
+## Related Rules
+
+- [enforce-camel-case](ENFORCE_CAMEL_CASE.md) - Enforces camelCase for variables and functions
+- [enforce-constant-case](ENFORCE_CONSTANT_CASE.md) - Enforces SCREAMING_SNAKE_CASE for global constants

package/docs/rules/ENFORCE_SERVICE_NAMING.md

@@ -1,48 +1,60 @@
 # enforce-service-naming
 
-Enforce `fetch` prefix for async functions in `*.service.ts` files instead of `get` or `load`.
+Ban misleading function name prefixes in `*.service.ts` files.
 
 ## Rule Details
 
-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.
+This rule flags misleading prefixes on async exported functions in `*.service.ts` files. It does not force a specific prefix — developers choose based on intent.
 
 ### Why?
 
-- **Clarity**: `fetch` clearly indicates a network operation, while `get` is ambiguous (could be synchronous accessor)
-- **Consistency**: Standardizes naming across all service files
-- **Semantics**: `fetch` aligns with the Fetch API and implies async data retrieval
+Service functions represent API/network calls. Certain prefixes are misleading in this context:
+
+- `set` implies a local setter, not an API call
+- `delete` is a JS reserved word that may conflict
+- `do` is vague and conveys no intent
+- `handle` is typically for UI event handlers, not service operations
+
+### Banned Prefixes
+
+| Prefix   | Why banned                                | Suggested alternatives    |
+| -------- | ----------------------------------------- | ------------------------- |
+| `set`    | Implies local setter, not API call        | `update`, `save`, `patch` |
+| `delete` | JS reserved word, may conflict            | `remove`, `archive`       |
+| `do`     | Vague, no intent                          | `submit`, `process`       |
+| `handle` | Vague, typically for event handlers in UI | `create`, `verify`        |
 
 ## Examples
 
 ### Incorrect
 
 ```ts
-// article.service.ts
-export async function getArticles() {}
-export async function loadFaq() {}
-export async function getUserById() {}
-export const getUsers = async () => {};
+// profile.service.ts
+export async function setProfile(data: ProfileRequest) {}
+export async function deleteComment(id: string) {}
+export async function doLogin(credentials: LoginRequest) {}
+export async function handlePayment(data: PaymentRequest) {}
 ```
 
 ### Correct
 
 ```ts
-// article.service.ts
+// profile.service.ts
+export async function getArticles() {}
 export async function fetchArticles() {}
-export async function fetchFaqList() {}
-export async function fetchUserById() {}
-export const fetchUsers = async () => {};
+export async function searchArticles(query: string) {}
+export async function createOrder(data: OrderRequest) {}
+export async function updateProfile(id: string, data: ProfileRequest) {}
+export async function removeComment(id: string) {}
+export async function verifyEmail(token: string) {}
 
 // Non-async functions can use any prefix
-export function getArticleById(id: string) {}
+export function setLocalState(value: string) {}
 
-// Other prefixes are allowed
-export async function createUser() {}
-export async function updateArticle() {}
-export async function deleteComment() {}
+// Non-exported functions are not checked
+async function handleInternal() {}
 ```
 
 ## When Not To Use It
 
-- If your project uses different naming conventions for service functions
-- If you prefer `get`/`load` prefixes for data-fetching operations
+If your project does not follow a service layer pattern or has different naming conventions for service functions.

package/docs/rules/JSX_NO_TERNARY_NULL.md

@@ -39,4 +39,4 @@ If your team prefers explicit ternary expressions for conditional rendering, eve
 
 ## Related Rules
 
-- [no-nested-ternary](JSX_NO_TERNARY_NULL.md)
+- [no-nested-ternary](NO_NESTED_TERNARY.md)

package/docs/rules/NO_INLINE_NESTED_OBJECT.md

@@ -1,10 +1,10 @@
 # no-inline-nested-object
 
-Require nested objects and arrays to span multiple lines.
+Require nested objects and arrays with multiple properties to span multiple lines.
 
 ## Rule Details
 
-This rule enforces that when an object property's value is another object or array, it should span multiple lines rather than being written inline. This improves readability and makes diffs cleaner when properties are added or removed.
+This rule enforces that when an object property's value is another object or array with more than one element, it should span multiple lines rather than being written inline. Single-property nested objects are allowed inline. This improves readability and makes diffs cleaner when properties are added or removed.
 
 ## Examples
 
@@ -25,6 +25,12 @@ const routes = {
 
 ### Correct
 
+```ts
+const config = {
+  database: { host: "localhost" },
+};
+```
+
 ```ts
 const config = {
   database: {
@@ -65,8 +71,8 @@ const initialState = {
 
 ## When Not To Use It
 
-If you prefer compact inline nested objects for simple cases, or if your team has different formatting preferences.
+If you prefer compact inline nested objects for all cases, or if your team has different formatting preferences.
 
 ## Fixable
 
-This rule is auto-fixable. Running ESLint with the `--fix` flag will automatically expand inline nested objects and arrays to multiple lines.
+This rule is auto-fixable. Running ESLint with the `--fix` flag will automatically expand inline nested objects and arrays with multiple properties to multiple lines.

package/docs/rules/NO_INLINE_RETURN_PROPERTIES.md

@@ -0,0 +1,83 @@
+# no-inline-return-properties
+
+Require return object properties to use shorthand notation by extracting non-shorthand values to const variables.
+
+## Rule Details
+
+This rule enforces that all properties in a returned object literal use shorthand notation. When a return statement contains an object with renamed or computed properties, the values should be extracted into const variables before the return statement.
+
+### Why?
+
+Return objects with a mix of shorthand and non-shorthand properties are harder to scan. Extracting values into named constants before returning keeps the return statement clean and makes the data flow easier to follow.
+
+## Examples
+
+### Incorrect
+
+```ts
+function useBranch() {
+  return {
+    admins,
+    branch,
+    coursesCurrentPage: coursePage,
+    coursesTotalPages: Math.ceil(sortedLearning.length / COURSES_PER_PAGE) || 1,
+    members,
+    membersHref: `/branch/${branchNumber}/members`,
+    news,
+    newsCurrentPage: newsData?.currentPage ?? 1,
+    newsTotalPages: newsData?.pages ?? 1,
+    stats,
+  };
+}
+```
+
+```ts
+function useJoin() {
+  return {
+    error,
+    isSubmitting,
+    onJoin: handleJoin,
+  };
+}
+```
+
+### Correct
+
+```ts
+function useBranch() {
+  const coursesCurrentPage = coursePage;
+  const coursesTotalPages = Math.ceil(sortedLearning.length / COURSES_PER_PAGE) || 1;
+  const membersHref = `/branch/${branchNumber}/members`;
+  const newsCurrentPage = newsData?.currentPage ?? 1;
+  const newsTotalPages = newsData?.pages ?? 1;
+
+  return {
+    admins,
+    branch,
+    coursesCurrentPage,
+    coursesTotalPages,
+    members,
+    membersHref,
+    news,
+    newsCurrentPage,
+    newsTotalPages,
+    stats,
+  };
+}
+```
+
+```ts
+function useJoin() {
+  const onJoin = handleJoin;
+
+  return {
+    error,
+    isSubmitting,
+    onJoin,
+  };
+}
+```
+
+## When Not To Use It
+
+If your project prefers inline property values in return statements for brevity.