eslint-plugin-nextfriday 1.14.0 → 1.15.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # eslint-plugin-nextfriday
 
+## 1.15.1
+
+### Patch Changes
+
+- [#71](https://github.com/next-friday/eslint-plugin-nextfriday/pull/71) [`4831ea6`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/4831ea697e9dfe38361b3a3577b67692ea1cd862) Thanks [@joetakara](https://github.com/joetakara)! - Update docs: add fixable info to sorting rules, add bundled plugin configs section to README.
+
+## 1.15.0
+
+### Minor Changes
+
+- [#68](https://github.com/next-friday/eslint-plugin-nextfriday/pull/68) [`857906e`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/857906e5264ef87a988ba5429019c004360fa2a1) Thanks [@nextfridaydeveloper](https://github.com/nextfridaydeveloper)! - Add sort-imports, sort-exports, sort-type-alphabetically, jsx-sort-props, jsx-no-newline-single-line-elements rules. Add auto-fix to sorting rules. Bundle eslint-plugin-unicorn and eslint-plugin-sonarjs configs.
+
+### Patch Changes
+
+- [#69](https://github.com/next-friday/eslint-plugin-nextfriday/pull/69) [`2475fc5`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/2475fc5e7d80c2b158cddbed961dbb7e4e348188) Thanks [@joetakara](https://github.com/joetakara)! - Fix CJS compatibility for bundled eslint-plugin-sonarjs and eslint-plugin-unicorn configs.
+
 ## 1.14.0
 
 ### Minor Changes

package/README.md

@@ -46,6 +46,21 @@ export default [nextfriday.configs.nextjs];
 export default [nextfriday.configs["nextjs/recommended"]];
 ```
 
+#### Bundled Plugin Configs
+
+Pre-configured configs for popular plugins. No extra install needed — they ship as dependencies.
+
+```js
+import nextfriday from "eslint-plugin-nextfriday";
+
+export default [nextfriday.configs["react/recommended"], ...nextfriday.configs.sonarjs, ...nextfriday.configs.unicorn];
+```
+
+| Config    | Plugin                | Description                                                                                                |
+| --------- | --------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `sonarjs` | eslint-plugin-sonarjs | SonarJS recommended rules for bug detection and code quality                                               |
+| `unicorn` | eslint-plugin-unicorn | Unicorn recommended rules (with `filename-case` and `prevent-abbreviations` off, `no-null` off in JSX/TSX) |
+
 ### Manual Configuration
 
 If you prefer to configure rules manually:
@@ -94,19 +109,24 @@ export default [
       "nextfriday/no-relative-imports": "error",
       "nextfriday/prefer-import-type": "error",
       "nextfriday/prefer-react-import-types": "error",
+      "nextfriday/sort-exports": "error",
+      "nextfriday/sort-imports": "error",
 
       // Type Patterns
       "nextfriday/prefer-named-param-types": "error",
       "nextfriday/prefer-interface-over-inline-types": "error",
+      "nextfriday/sort-type-alphabetically": "error",
       "nextfriday/sort-type-required-first": "error",
 
       // React/JSX
       "nextfriday/jsx-newline-between-elements": "error",
       "nextfriday/jsx-no-inline-object-prop": "error",
+      "nextfriday/jsx-no-newline-single-line-elements": "error",
       "nextfriday/jsx-no-non-component-function": "error",
       "nextfriday/jsx-no-variable-in-callback": "error",
       "nextfriday/jsx-require-suspense": "error",
       "nextfriday/jsx-simple-props": "error",
+      "nextfriday/jsx-sort-props": "error",
       "nextfriday/prefer-jsx-template-literals": "error",
       "nextfriday/react-props-destructure": "error",
       "nextfriday/enforce-props-suffix": "error",
@@ -179,7 +199,7 @@ module.exports = {
 | [no-logic-in-params](docs/rules/NO_LOGIC_IN_PARAMS.md)                       | Disallow logic/conditions in function parameters - extract to const    | ❌      |
 | [enforce-hook-naming](docs/rules/ENFORCE_HOOK_NAMING.md)                     | Enforce 'use' prefix for functions in \*.hook.ts files                 | ❌      |
 | [enforce-service-naming](docs/rules/ENFORCE_SERVICE_NAMING.md)               | Enforce 'fetch' prefix for async functions in \*.service.ts files      | ❌      |
-| [enforce-sorted-destructuring](docs/rules/ENFORCE_SORTED_DESTRUCTURING.md)   | Enforce alphabetical sorting of destructured properties                | ❌      |
+| [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-inline-default-export](docs/rules/NO_INLINE_DEFAULT_EXPORT.md)           | Disallow inline default exports - declare first, then export           | ❌      |
 | [no-direct-date](docs/rules/NO_DIRECT_DATE.md)                               | Disallow direct usage of Date constructor and methods                  | ❌      |
@@ -198,6 +218,8 @@ module.exports = {
 | [no-relative-imports](docs/rules/NO_RELATIVE_IMPORTS.md)             | Disallow relative imports with ../ - use absolute imports | ❌      |
 | [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    | ✅      |
+| [sort-exports](docs/rules/SORT_EXPORTS.md)                           | Enforce a consistent ordering of export groups            | ✅      |
+| [sort-imports](docs/rules/SORT_IMPORTS.md)                           | Enforce a consistent ordering of import groups            | ✅      |
 
 ### Type Pattern Rules
 
@@ -205,22 +227,25 @@ module.exports = {
 | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------- |
 | [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 | ❌      |
-| [sort-type-required-first](docs/rules/SORT_TYPE_REQUIRED_FIRST.md)                     | Enforce required properties before optional in types/interfaces  | ❌      |
+| [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  | ✅      |
 
 ### React/JSX Rules
 
-| Rule                                                                               | Description                                                           | Fixable |
-| ---------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------- |
-| [jsx-newline-between-elements](docs/rules/JSX_NEWLINE_BETWEEN_ELEMENTS.md)         | Require empty lines between sibling multi-line JSX elements           | ✅      |
-| [jsx-no-inline-object-prop](docs/rules/JSX_NO_INLINE_OBJECT_PROP.md)               | Disallow inline object literals in JSX props                          | ❌      |
-| [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       | ❌      |
-| [jsx-require-suspense](docs/rules/JSX_REQUIRE_SUSPENSE.md)                         | Require lazy-loaded components to be wrapped in Suspense              | ❌      |
-| [jsx-simple-props](docs/rules/JSX_SIMPLE_PROPS.md)                                 | Enforce simple prop values (strings, variables, callbacks, ReactNode) | ❌      |
-| [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-props-suffix](docs/rules/ENFORCE_PROPS_SUFFIX.md)                         | Enforce 'Props' suffix for interfaces and types in \*.tsx files       | ❌      |
-| [enforce-readonly-component-props](docs/rules/ENFORCE_READONLY_COMPONENT_PROPS.md) | Enforce Readonly wrapper for React component props                    | ✅      |
+| Rule                                                                                     | Description                                                           | Fixable |
+| ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------- |
+| [jsx-newline-between-elements](docs/rules/JSX_NEWLINE_BETWEEN_ELEMENTS.md)               | Require empty lines between sibling multi-line JSX elements           | ✅      |
+| [jsx-no-inline-object-prop](docs/rules/JSX_NO_INLINE_OBJECT_PROP.md)                     | Disallow inline object literals in JSX props                          | ❌      |
+| [jsx-no-newline-single-line-elements](docs/rules/JSX_NO_NEWLINE_SINGLE_LINE_ELEMENTS.md) | Disallow empty lines between single-line sibling JSX elements         | ✅      |
+| [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       | ❌      |
+| [jsx-require-suspense](docs/rules/JSX_REQUIRE_SUSPENSE.md)                               | Require lazy-loaded components to be wrapped in Suspense              | ❌      |
+| [jsx-simple-props](docs/rules/JSX_SIMPLE_PROPS.md)                                       | Enforce simple prop values (strings, variables, callbacks, ReactNode) | ❌      |
+| [jsx-sort-props](docs/rules/JSX_SORT_PROPS.md)                                           | Enforce JSX props are sorted by value type                            | ❌      |
+| [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-props-suffix](docs/rules/ENFORCE_PROPS_SUFFIX.md)                               | Enforce 'Props' suffix for interfaces and types in \*.tsx files       | ❌      |
+| [enforce-readonly-component-props](docs/rules/ENFORCE_READONLY_COMPONENT_PROPS.md)       | Enforce Readonly wrapper for React component props                    | ✅      |
 
 ### Next.js Rules
 
@@ -234,14 +259,14 @@ module.exports = {
 
 | Preset               | Severity | Base Rules | JSX Rules | Next.js Rules | Total Rules |
 | -------------------- | -------- | ---------- | --------- | ------------- | ----------- |
-| `base`               | warn     | 30         | 0         | 0             | 30          |
-| `base/recommended`   | error    | 30         | 0         | 0             | 30          |
-| `react`              | warn     | 30         | 12        | 0             | 42          |
-| `react/recommended`  | error    | 30         | 12        | 0             | 42          |
-| `nextjs`             | warn     | 30         | 12        | 1             | 43          |
-| `nextjs/recommended` | error    | 30         | 12        | 1             | 43          |
+| `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 Configuration Rules (30 rules)
+### Base Configuration Rules (33 rules)
 
 Included in `base`, `base/recommended`, and all other presets:
 
@@ -274,9 +299,12 @@ Included in `base`, `base/recommended`, and all other presets:
 - `nextfriday/prefer-named-param-types`
 - `nextfriday/prefer-react-import-types`
 - `nextfriday/require-explicit-return-type`
+- `nextfriday/sort-exports`
+- `nextfriday/sort-imports`
+- `nextfriday/sort-type-alphabetically`
 - `nextfriday/sort-type-required-first`
 
-### JSX Rules (12 rules)
+### JSX Rules (14 rules)
 
 Additionally included in `react`, `react/recommended`, `nextjs`, `nextjs/recommended`:
 
@@ -284,11 +312,13 @@ Additionally included in `react`, `react/recommended`, `nextjs`, `nextjs/recomme
 - `nextfriday/enforce-readonly-component-props`
 - `nextfriday/jsx-newline-between-elements`
 - `nextfriday/jsx-no-inline-object-prop`
+- `nextfriday/jsx-no-newline-single-line-elements`
 - `nextfriday/jsx-no-non-component-function`
 - `nextfriday/jsx-no-variable-in-callback`
 - `nextfriday/jsx-pascal-case`
 - `nextfriday/jsx-require-suspense`
 - `nextfriday/jsx-simple-props`
+- `nextfriday/jsx-sort-props`
 - `nextfriday/prefer-interface-over-inline-types`
 - `nextfriday/prefer-jsx-template-literals`
 - `nextfriday/react-props-destructure`

package/docs/rules/ENFORCE_SORTED_DESTRUCTURING.md

@@ -2,6 +2,8 @@
 
 Enforce alphabetical sorting of destructured properties with defaults first.
 
+This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
 ## Rule Details
 
 This rule enforces that object destructuring properties are sorted alphabetically, with properties that have default values coming first. Both groups (defaults and non-defaults) are sorted alphabetically (A-Z).

package/docs/rules/JSX_NO_NEWLINE_SINGLE_LINE_ELEMENTS.md

@@ -0,0 +1,76 @@
+# jsx-no-newline-single-line-elements
+
+Disallow empty lines between single-line sibling JSX elements.
+
+## 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.
+
+Use with `jsx-newline-between-elements` which requires empty lines between multi-line siblings.
+
+### Why?
+
+1. **Readability**: Single-line elements that are visually similar should be grouped together without gaps
+2. **Consistency**: Prevents inconsistent spacing between elements of the same visual weight
+3. **Complementary**: Works alongside `jsx-newline-between-elements` to create clear visual separation only where it matters
+
+## Examples
+
+### ❌ Incorrect
+
+```tsx
+// Bad: Unnecessary empty line between single-line siblings
+<div>
+  <Panel id="courses">Courses</Panel>
+
+  <Panel id="news">News</Panel>
+</div>
+```
+
+```tsx
+// Bad: Empty lines between single-line list items
+<ul>
+  <li>Item 1</li>
+
+  <li>Item 2</li>
+
+  <li>Item 3</li>
+</ul>
+```
+
+### ✅ Correct
+
+```tsx
+// Good: Single-line siblings are compact
+<div>
+  <Panel id="courses">Courses</Panel>
+  <Panel id="news">News</Panel>
+</div>
+```
+
+```tsx
+// Good: Multi-line sibling has empty line (handled by jsx-newline-between-elements)
+<div>
+  <Panel id="overview">
+    <div className="grid gap-8">
+      <div>Content</div>
+    </div>
+  </Panel>
+
+  <Panel id="courses">Courses</Panel>
+  <Panel id="news">News</Panel>
+</div>
+```
+
+```tsx
+// Good: Self-closing components without empty lines
+<div>
+  <Header />
+  <Main />
+  <Footer />
+</div>
+```
+
+## When Not To Use It
+
+If you prefer empty lines between all sibling JSX elements regardless of their line count, you can disable this rule.

package/docs/rules/JSX_SORT_PROPS.md

@@ -0,0 +1,58 @@
+# jsx-sort-props
+
+Enforce JSX props are sorted by value type.
+
+## Rule Details
+
+This rule enforces a consistent ordering of JSX props based on the type of their value. Props must appear in the following order:
+
+1. **String** - String literals and template literals
+2. **Number/Boolean/Null** - Numeric literals, boolean literals, null, and undefined
+3. **Object/Array** - Inline objects and arrays
+4. **Function** - Arrow functions and function expressions
+5. **JSX Element** - JSX elements and fragments
+6. **Shorthand boolean** - Props with no value (e.g., `disabled`)
+
+Props with values that cannot be statically determined (variables, member expressions, call expressions, etc.) are skipped and do not affect the ordering check. Spread attributes (`{...props}`) reset the ordering context.
+
+### Why?
+
+- **Readability**: Grouping props by type makes components easier to scan
+- **Consistency**: Enforces a uniform prop ordering convention across the codebase
+- **Predictability**: Developers know where to find specific prop types at a glance
+
+## Examples
+
+### ❌ Incorrect
+
+```tsx
+<Component disabled title="hello" />
+<Component onClick={() => {}} count={42} />
+<Component icon={<Icon />} style={{ color: "red" }} />
+```
+
+### ✅ Correct
+
+```tsx
+<Component
+  title="hello"
+  count={100}
+  style={{ color: "red" }}
+  onClick={() => handleClick()}
+  icon={<HomeIcon />}
+  disabled
+/>
+
+<Component title="hello" count={42} disabled />
+
+<Component value={someVar} disabled />
+```
+
+## When Not To Use It
+
+- If your team prefers alphabetical or custom prop ordering
+- If you use a different prop sorting convention
+
+## Related Rules
+
+- [jsx-simple-props](./JSX_SIMPLE_PROPS.md) - Enforce simple prop values

package/docs/rules/SORT_EXPORTS.md

@@ -0,0 +1,70 @@
+# sort-exports
+
+Enforce a consistent ordering of export groups.
+
+This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+## Rule Details
+
+This rule enforces that named export statements (without declarations) are grouped and ordered by their source type. It does not enforce alphabetical sorting within groups.
+
+### Why?
+
+1. **Readability**: Grouping exports by source type makes barrel files and re-export modules easier to scan
+2. **Consistency**: A predictable export order reduces merge conflicts and code review friction
+3. **Separation of concerns**: Re-exports from external/internal sources vs local exports serve different purposes
+
+### Export Group Order
+
+1. **External/alias re-exports** — source matches a package name or alias (`@/`, `~/`, `#`) (e.g., `export { foo } from "react"`)
+2. **Relative re-exports** — source starts with `.` (e.g., `export { bar } from "../bar"`)
+3. **Local exports** — no source (e.g., `export { baz }`)
+
+Skipped (breaks contiguity): `export default`, `export *`, `export const/function/class` (declarations).
+
+Non-contiguous exports (separated by other statements) are checked independently.
+
+## Examples
+
+### ❌ Incorrect
+
+```ts
+// Bad: Local before re-export
+export { bar };
+export { foo } from "react";
+```
+
+```ts
+// Bad: Relative before external
+export { bar } from "../bar";
+export { foo } from "react";
+```
+
+### ✅ Correct
+
+```ts
+// Good: All 3 groups in correct order
+export { foo } from "@/lib/foo";
+export { bar } from "../bar";
+export { baz };
+```
+
+```ts
+// Good: Non-contiguous exports are independent
+export { foo } from "react";
+
+const x = 1;
+
+export { bar };
+```
+
+```ts
+// Good: Export declarations break contiguity
+export const x = 1;
+export { foo } from "./foo";
+export { bar };
+```
+
+## When Not To Use It
+
+If you prefer a different export ordering convention or don't want to enforce any particular order for exports, you can disable this rule.

package/docs/rules/SORT_IMPORTS.md

@@ -0,0 +1,80 @@
+# sort-imports
+
+Enforce a consistent ordering of import groups.
+
+This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+## Rule Details
+
+This rule enforces that import statements are grouped and ordered by their source type. It does not enforce alphabetical sorting within groups.
+
+### Why?
+
+1. **Readability**: Grouping imports by source type makes it easy to scan dependencies at a glance
+2. **Consistency**: A predictable import order reduces merge conflicts and code review friction
+3. **Separation of concerns**: Side effects, platform modules, third-party packages, internal aliases, and relative imports serve different purposes
+
+### Import Group Order
+
+1. **Side-effect imports** — no specifiers (e.g., `import "./setup"`)
+2. **Node.js builtins** — `node:` prefix or known builtin names (e.g., `import fs from "node:fs"`)
+3. **External packages** — scoped or plain package names (e.g., `import React from "react"`)
+4. **Internal aliases** — paths starting with `@/`, `~/`, or `#` (e.g., `import { utils } from "@/lib/utils"`)
+5. **Relative imports** — paths starting with `.` (e.g., `import { foo } from "../foo"`)
+
+Type-only imports (`import type`) are skipped and do not affect ordering.
+
+Non-contiguous imports (separated by other statements) are checked independently.
+
+## Examples
+
+### ❌ Incorrect
+
+```ts
+// Bad: Relative before external
+import { foo } from "../foo";
+import React from "react";
+```
+
+```ts
+// Bad: External before builtin
+import React from "react";
+import fs from "node:fs";
+```
+
+```ts
+// Bad: Side-effect after external
+import React from "react";
+import "./setup";
+```
+
+### ✅ Correct
+
+```ts
+// Good: All 5 groups in correct order
+import "./setup";
+import fs from "node:fs";
+import React from "react";
+import { utils } from "@/lib/utils";
+import { foo } from "../foo";
+```
+
+```ts
+// Good: Type imports can appear anywhere
+import type { FC } from "react";
+import { foo } from "../foo";
+import React from "react";
+```
+
+```ts
+// Good: Non-contiguous imports are independent
+import React from "react";
+
+const x = 1;
+
+import { foo } from "../foo";
+```
+
+## When Not To Use It
+
+If you use a different import sorting tool (e.g., `eslint-plugin-simple-import-sort`) or prefer a different group ordering, you can disable this rule.

package/docs/rules/SORT_TYPE_ALPHABETICALLY.md

@@ -0,0 +1,106 @@
+# sort-type-alphabetically
+
+Enforce alphabetical sorting of properties within required and optional groups in TypeScript interfaces and type aliases.
+
+This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
+
+## Rule Details
+
+This rule enforces that TypeScript interface and type alias properties are sorted alphabetically (A-Z) within their respective groups (required and optional). It checks each group independently.
+
+### Why?
+
+1. **Readability**: Alphabetical ordering makes properties easier to find
+2. **Consistency**: A predictable ordering reduces cognitive load during code review
+3. **Maintainability**: Clear structure makes it easier to add or remove properties
+
+### Sorting Order
+
+Properties within each group are sorted alphabetically A-Z:
+
+1. **Required properties** sorted A-Z among themselves
+2. **Optional properties** sorted A-Z among themselves
+
+Use with `sort-type-required-first` to also enforce required properties come before optional.
+
+## Examples
+
+### ❌ Incorrect
+
+```ts
+// Bad: Required not sorted A-Z
+interface Props {
+  src: string;
+  alt: string;
+}
+```
+
+```ts
+// Bad: Optional not sorted A-Z
+interface Props {
+  b?: number;
+  a?: string;
+}
+```
+
+```ts
+// Bad: Required group not sorted A-Z
+interface HeroBannerRootProps {
+  size: "detail" | "highlight" | "main";
+  alt: string;
+  src: string;
+  className?: string;
+  label?: string;
+}
+```
+
+### ✅ Correct
+
+```ts
+// Good: Required A-Z, optional A-Z
+interface HeroBannerRootProps {
+  alt: string;
+  size: "detail" | "highlight" | "main";
+  src: string;
+  className?: string;
+  label?: string;
+  onClick?: () => void;
+}
+```
+
+```ts
+// Good: All required, sorted A-Z
+interface Props {
+  a: string;
+  b: number;
+  c: boolean;
+}
+```
+
+```ts
+// Good: All optional, sorted A-Z
+interface Props {
+  a?: string;
+  b?: number;
+  c?: boolean;
+}
+```
+
+```ts
+// Good: Type alias with A-Z within groups
+type Props = {
+  alt: string;
+  size: string;
+  src: string;
+  label?: string;
+};
+```
+
+## When Not To Use It
+
+If you prefer a different sorting strategy for type properties or don't want to enforce alphabetical ordering, you can disable this rule.
+
+## Further Reading
+
+- [TypeScript Interfaces](https://www.typescriptlang.org/docs/handbook/2/objects.html)
+- [TypeScript Type Aliases](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-aliases)