eslint-plugin-nextfriday 1.0.2 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # eslint-plugin-nextfriday
 
+## 1.1.1
+
+### Patch Changes
+
+- [#14](https://github.com/next-friday/eslint-plugin-nextfriday/pull/14) [`de54aaa`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/de54aaa42833ada9d847fe3885ab98b82e0590e9) Thanks [@nextfridaydeveloper](https://github.com/nextfridaydeveloper)! - Improved type checking logic across ESLint rules to enhance accuracy and reliability. This refactor focuses on better type inference, more precise type guards, and improved handling of edge cases in rule implementations.
+
+## 1.1.0
+
+### Minor Changes
+
+- [#12](https://github.com/next-friday/eslint-plugin-nextfriday/pull/12) [`30dc89f`](https://github.com/next-friday/eslint-plugin-nextfriday/commit/30dc89f3c4d11c9cb320b8c3dfa370b7caff9ddc) Thanks [@nextfridaydeveloper](https://github.com/nextfridaydeveloper)! - Added two new ESLint rules to improve React development practices and code quality. The `prefer-react-import-types` rule enforces direct import of React types, while `prefer-interface-over-inline-types` promotes better type organization. Also improved the React component detection logic in the existing `react-props-destructure` rule.
+
 ## 1.0.2
 
 ### Patch Changes

package/README.md

@@ -59,23 +59,24 @@ export default [
       nextfriday,
     },
     rules: {
-      // Base rules (suitable for all projects)
       "nextfriday/no-emoji": "error",
       "nextfriday/file-kebab-case": "error",
       "nextfriday/md-filename-case-restriction": "error",
       "nextfriday/prefer-destructuring-params": "error",
       "nextfriday/no-explicit-return-type": "error",
       "nextfriday/prefer-import-type": "error",
-      // JSX rule (only for React/Next.js projects)
+      "nextfriday/prefer-react-import-types": "error",
       "nextfriday/jsx-pascal-case": "error",
+      "nextfriday/prefer-interface-over-inline-types": "error",
+      "nextfriday/react-props-destructure": "error",
     },
   },
 ];
 ```
 
-### Legacy Config
+### Legacy Config (ESLint 8 and below)
 
-#### Base Configuration
+#### Base Legacy Configuration
 
 ```js
 module.exports = {
@@ -84,7 +85,7 @@ module.exports = {
 };
 ```
 
-#### React Configuration
+#### React Legacy Configuration
 
 ```js
 module.exports = {
@@ -93,7 +94,7 @@ module.exports = {
 };
 ```
 
-#### Next.js Configuration
+#### Next.js Legacy Configuration
 
 ```js
 module.exports = {
@@ -104,15 +105,18 @@ module.exports = {
 
 ## Rules
 
-| Rule                                                                       | Description                                                  | Fixable |
-| -------------------------------------------------------------------------- | ------------------------------------------------------------ | ------- |
-| [no-emoji](docs/rules/NO_EMOJI.md)                                         | Disallow emojis in code                                      | ❌      |
-| [file-kebab-case](docs/rules/FILE_KEBAB_CASE.md)                           | Enforce kebab-case filenames for .ts and .js files           | ❌      |
-| [jsx-pascal-case](docs/rules/JSX_PASCAL_CASE.md)                           | Enforce PascalCase filenames for .jsx and .tsx files         | ❌      |
-| [md-filename-case-restriction](docs/rules/MD_FILENAME_CASE_RESTRICTION.md) | Enforce SNAKE_CASE filenames for .md files                   | ❌      |
-| [prefer-destructuring-params](docs/rules/PREFER_DESTRUCTURING_PARAMS.md)   | Enforce destructuring for functions with multiple parameters | ❌      |
-| [no-explicit-return-type](docs/rules/NO_EXPLICIT_RETURN_TYPE.md)           | Disallow explicit return types on functions                  | ✅      |
-| [prefer-import-type](docs/rules/PREFER_IMPORT_TYPE.md)                     | Enforce using 'import type' for type-only imports            | ✅      |
+| Rule                                                                                   | Description                                                      | Fixable |
+| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------- |
+| [no-emoji](docs/rules/NO_EMOJI.md)                                                     | Disallow emojis in code                                          | ❌      |
+| [file-kebab-case](docs/rules/FILE_KEBAB_CASE.md)                                       | Enforce kebab-case filenames for .ts and .js files               | ❌      |
+| [jsx-pascal-case](docs/rules/JSX_PASCAL_CASE.md)                                       | Enforce PascalCase filenames for .jsx and .tsx files             | ❌      |
+| [md-filename-case-restriction](docs/rules/MD_FILENAME_CASE_RESTRICTION.md)             | Enforce SNAKE_CASE filenames for .md files                       | ❌      |
+| [prefer-destructuring-params](docs/rules/PREFER_DESTRUCTURING_PARAMS.md)               | Enforce destructuring for functions with multiple parameters     | ❌      |
+| [no-explicit-return-type](docs/rules/NO_EXPLICIT_RETURN_TYPE.md)                       | Disallow explicit return types on functions                      | ✅      |
+| [prefer-import-type](docs/rules/PREFER_IMPORT_TYPE.md)                                 | Enforce using 'import type' for type-only imports                | ✅      |
+| [prefer-interface-over-inline-types](docs/rules/PREFER_INTERFACE_OVER_INLINE_TYPES.md) | Enforce interface declarations over inline types for React props | ❌      |
+| [prefer-react-import-types](docs/rules/PREFER_REACT_IMPORT_TYPES.md)                   | Enforce direct imports from 'react' instead of React.X           | ✅      |
+| [react-props-destructure](docs/rules/REACT_PROPS_DESTRUCTURE.md)                       | Enforce destructuring props inside React component body          | ❌      |
 
 ## Configurations
 
@@ -128,6 +132,7 @@ Basic configuration without JSX-specific rules:
 - `nextfriday/prefer-destructuring-params`: `"error"`
 - `nextfriday/no-explicit-return-type`: `"error"`
 - `nextfriday/prefer-import-type`: `"error"`
+- `nextfriday/prefer-react-import-types`: `"error"`
 
 #### `base/recommended`
 
@@ -141,6 +146,8 @@ Includes all base rules plus React-specific rules:
 
 - All base rules above
 - `nextfriday/jsx-pascal-case`: `"error"`
+- `nextfriday/prefer-interface-over-inline-types`: `"error"`
+- `nextfriday/react-props-destructure`: `"error"`
 
 #### `react/recommended`
 
@@ -154,6 +161,8 @@ Includes all rules suitable for Next.js projects:
 
 - All base rules
 - `nextfriday/jsx-pascal-case`: `"error"`
+- `nextfriday/prefer-interface-over-inline-types`: `"error"`
+- `nextfriday/react-props-destructure`: `"error"`
 
 #### `nextjs/recommended`
 

package/docs/rules/PREFER_INTERFACE_OVER_INLINE_TYPES.md

@@ -0,0 +1,211 @@
+# prefer-interface-over-inline-types
+
+Enforce interface declarations over inline type annotations for React component props.
+
+## Rule Details
+
+This rule enforces the use of interface declarations instead of inline type annotations for React component props when the type is complex. This promotes better code organization, reusability, and readability.
+
+Examples of **incorrect** code for this rule:
+
+```tsx
+// More than 2 properties - should use interface
+const Component = (props: { children: ReactNode; title: string; onClick: () => void }) => (
+  <div onClick={props.onClick}>
+    <h1>{props.title}</h1>
+    {props.children}
+  </div>
+);
+
+// Nested object types - should use interface
+const Component = (props: { user: { name: string; age: number }; isActive: boolean }) => <div>{props.user.name}</div>;
+
+// Array types - should use interface
+const Component = (props: { items: string[]; title: string }) => (
+  <div>
+    <h1>{props.title}</h1>
+    {props.items.map((item) => (
+      <span key={item}>{item}</span>
+    ))}
+  </div>
+);
+
+// Union types - should use interface
+const Component = (props: { status: "loading" | "success" | "error"; message: string }) => (
+  <div className={props.status}>{props.message}</div>
+);
+
+// Function declarations
+function Component(props: { data: { id: number; name: string }; isVisible: boolean }) {
+  return <div>{props.data.name}</div>;
+}
+
+// Function expressions
+const Component = function (props: { config: { theme: string; lang: string }; children: ReactNode }) {
+  return <div className={props.config.theme}>{props.children}</div>;
+};
+```
+
+Examples of **correct** code for this rule:
+
+```tsx
+// Using interface for complex props
+interface ComponentProps {
+  children: ReactNode;
+  title: string;
+  onClick: () => void;
+}
+
+const Component = (props: ComponentProps) => (
+  <div onClick={props.onClick}>
+    <h1>{props.title}</h1>
+    {props.children}
+  </div>
+);
+
+// Using interface for nested objects
+interface UserComponentProps {
+  user: {
+    name: string;
+    age: number;
+  };
+  isActive: boolean;
+}
+
+const Component = (props: UserComponentProps) => <div>{props.user.name}</div>;
+
+// Using type alias is also acceptable
+type ListComponentProps = {
+  items: string[];
+  title: string;
+};
+
+const Component = (props: ListComponentProps) => (
+  <div>
+    <h1>{props.title}</h1>
+    {props.items.map((item) => (
+      <span key={item}>{item}</span>
+    ))}
+  </div>
+);
+
+// Simple inline types are allowed (2 or fewer properties, no complex types)
+const Component = (props: { children: ReactNode }) => <div>{props.children}</div>;
+
+const Component = (props: { title: string; onClick: () => void }) => <div onClick={props.onClick}>{props.title}</div>;
+
+// Non-React functions are ignored
+const helper = (props: { value: number; name: string; data: object }) => {
+  return props.value + props.name.length;
+};
+
+// Functions with no parameters
+const Component = () => <div>Hello</div>;
+
+// Functions with multiple parameters
+const Component = (props: { title: string }, ref: any) => <div>{props.title}</div>;
+```
+
+## Why?
+
+### Benefits of interface declarations:
+
+1. **Reusability**: Interfaces can be reused across multiple components
+2. **Better organization**: Separates type definitions from component logic
+3. **Improved readability**: Makes component signatures cleaner and easier to understand
+4. **Better IDE support**: Enhanced autocomplete, refactoring, and navigation
+5. **Documentation**: Interfaces serve as clear documentation of component APIs
+6. **Extensibility**: Interfaces can be extended and composed more easily
+
+## Rule Scope
+
+This rule applies to:
+
+- React functional components (arrow functions, function expressions, function declarations)
+- Functions that return JSX elements or fragments
+- Props with inline type annotations that meet complexity criteria
+
+**Complexity criteria:**
+
+- More than 2 properties in the type literal
+- Contains nested object types (`{ user: { name: string } }`)
+- Contains array types (`string[]`, `Array<T>`)
+- Contains union types (`'a' | 'b' | 'c'`)
+
+The rule ignores:
+
+- Non-React functions (functions that don't return JSX)
+- Functions with multiple parameters
+- Functions with no parameters
+- Simple inline types (2 or fewer properties with primitive types)
+- Components already using named types or interfaces
+
+## When Not To Use It
+
+This rule should not be used if you:
+
+- Prefer inline types for consistency across your codebase
+- Are working with very simple components that don't benefit from interface extraction
+- Have specific naming conventions that conflict with interface declarations
+- Are maintaining legacy code with established patterns
+
+## Configuration
+
+This rule is included in the following configurations:
+
+- `nextfriday/react`
+- `nextfriday/react/recommended`
+- `nextfriday/nextjs`
+- `nextfriday/nextjs/recommended`
+
+To enable this rule manually:
+
+```json
+{
+  "rules": {
+    "nextfriday/prefer-interface-over-inline-types": "error"
+  }
+}
+```
+
+## Examples of Complexity Detection
+
+### Simple types (allowed as inline)
+
+```tsx
+// ✅ Simple - only 1 property
+const Component = (props: { children: ReactNode }) => <div>{props.children}</div>;
+
+// ✅ Simple - only 2 properties with primitive types
+const Component = (props: { title: string; count: number }) => (
+  <div>
+    {props.title}: {props.count}
+  </div>
+);
+```
+
+### Complex types (should use interface)
+
+```tsx
+// ❌ Complex - more than 2 properties
+const Component = (props: { title: string; count: number; isActive: boolean }) => <div>...</div>;
+
+// ❌ Complex - nested object
+const Component = (props: { user: { name: string }; isActive: boolean }) => <div>...</div>;
+
+// ❌ Complex - array type
+const Component = (props: { items: string[]; title: string }) => <div>...</div>;
+
+// ❌ Complex - union type
+const Component = (props: { status: "loading" | "success"; message: string }) => <div>...</div>;
+```
+
+## Compatibility
+
+- React 16.8+ (functional components)
+- TypeScript 3.0+ (interface declarations)
+- ESLint 9+ with flat config
+
+## Version
+
+This rule was introduced in eslint-plugin-nextfriday v1.2.0.

package/docs/rules/PREFER_REACT_IMPORT_TYPES.md

@@ -0,0 +1,175 @@
+# prefer-react-import-types
+
+Enforce importing React types and utilities from 'react' instead of using React.X notation.
+
+## Rule Details
+
+This rule enforces direct imports of React types and utilities instead of using the React namespace notation (`React.ReactNode`, `React.useState`, etc.). This promotes cleaner imports and better tree-shaking in modern bundlers.
+
+Examples of **incorrect** code for this rule:
+
+```tsx
+// Types with React namespace
+const Component = (props: { children: React.ReactNode }) => <div>{props.children}</div>;
+
+interface Props {
+  title: React.ReactElement;
+  onClick: React.MouseEventHandler;
+}
+
+const MyComponent: React.FC<Props> = ({ title, onClick }) => <div onClick={onClick}>{title}</div>;
+
+// Hooks with React namespace
+const Component = () => {
+  const [state, setState] = React.useState(0);
+  const value = React.useMemo(() => state * 2, [state]);
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    console.log("mounted");
+  }, []);
+
+  return <div ref={ref}>{value}</div>;
+};
+
+// Utilities with React namespace
+const element = React.createElement("div", null, "Hello");
+const MemoizedComponent = React.memo(() => <div>Hello</div>);
+const LazyComponent = React.lazy(() => import("./Component"));
+
+const MyFragment = () => (
+  <React.Fragment>
+    <div>Item 1</div>
+    <div>Item 2</div>
+  </React.Fragment>
+);
+```
+
+Examples of **correct** code for this rule:
+
+```tsx
+// Direct type imports
+import type { ReactNode, ReactElement, MouseEventHandler, FC } from "react";
+
+const Component = (props: { children: ReactNode }) => <div>{props.children}</div>;
+
+interface Props {
+  title: ReactElement;
+  onClick: MouseEventHandler;
+}
+
+const MyComponent: FC<Props> = ({ title, onClick }) => <div onClick={onClick}>{title}</div>;
+
+// Direct hook imports
+import { useState, useMemo, useRef, useEffect } from "react";
+
+const Component = () => {
+  const [state, setState] = useState(0);
+  const value = useMemo(() => state * 2, [state]);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    console.log("mounted");
+  }, []);
+
+  return <div ref={ref}>{value}</div>;
+};
+
+// Direct utility imports
+import { createElement, memo, lazy, Fragment } from "react";
+
+const element = createElement("div", null, "Hello");
+const MemoizedComponent = memo(() => <div>Hello</div>);
+const LazyComponent = lazy(() => import("./Component"));
+
+const MyFragment = () => (
+  <Fragment>
+    <div>Item 1</div>
+    <div>Item 2</div>
+  </Fragment>
+);
+```
+
+## Why?
+
+### Benefits of direct imports
+
+1. **Better tree-shaking**: Bundlers can more easily eliminate unused code when imports are explicit
+2. **Cleaner code**: Reduces namespace pollution and makes dependencies more explicit
+3. **Improved IDE support**: Better autocomplete and refactoring capabilities
+4. **Smaller bundle sizes**: Only import what you actually use
+5. **TypeScript optimization**: Better type checking and inference with explicit imports
+6. **Modern practices**: Aligns with current React ecosystem conventions
+
+## Automatic Fixing
+
+This rule provides automatic fixing that replaces `React.X` with the direct import name. However, you will need to manually add the appropriate import statements:
+
+- **Types**: Use `import type { TypeName } from "react"`
+- **Runtime code**: Use `import { functionName } from "react"`
+
+## Supported React Exports
+
+### Types (use `import type`)
+
+- `ReactNode`, `ReactElement`, `ReactChildren`, `ReactChild`
+- `ComponentType`, `FC`, `FunctionComponent`, `Component`, `PureComponent`
+- Event handlers: `ReactEventHandler`, `MouseEventHandler`, `ChangeEventHandler`, etc.
+- Refs: `RefObject`, `MutableRefObject`, `Ref`, `ForwardedRef`
+- Props: `HTMLProps`, `ComponentProps`
+- `JSXElementConstructor`
+
+### Runtime Exports (use `import`)
+
+#### Hooks
+
+- `useState`, `useEffect`, `useContext`, `useReducer`
+- `useCallback`, `useMemo`, `useRef`, `useImperativeHandle`
+- `useLayoutEffect`, `useDebugValue`, `useDeferredValue`
+- `useTransition`, `useId`, `useSyncExternalStore`, `useInsertionEffect`
+
+#### Utilities
+
+- `createElement`, `createContext`, `forwardRef`, `memo`, `lazy`
+- `Suspense`, `Fragment`, `StrictMode`, `createRef`
+- `isValidElement`, `cloneElement`, `Children`
+
+## When Not To Use It
+
+This rule should not be used if you:
+
+- Prefer the React namespace for consistency across a large codebase
+- Are working with legacy code that heavily uses React namespace
+- Need to maintain compatibility with older bundlers that don't support tree-shaking
+
+## Configuration
+
+This rule is included in the following configurations:
+
+- `nextfriday/base`
+- `nextfriday/base/recommended`
+- `nextfriday/react`
+- `nextfriday/react/recommended`
+- `nextfriday/nextjs`
+- `nextfriday/nextjs/recommended`
+
+To enable this rule manually:
+
+```json
+{
+  "rules": {
+    "nextfriday/prefer-react-import-types": "error"
+  }
+}
+```
+
+## Compatibility
+
+- React 16.8+ (hooks support)
+- TypeScript 3.8+ (type-only imports)
+- Modern bundlers with tree-shaking support
+- ESLint 9+ with flat config
+
+## Version
+
+This rule was introduced in eslint-plugin-nextfriday v1.1.0.

package/docs/rules/REACT_PROPS_DESTRUCTURE.md

@@ -0,0 +1,158 @@
+# react-props-destructure
+
+Enforce destructuring props inside React component body instead of parameters.
+
+## Rule Details
+
+This rule enforces a consistent pattern for handling props in React components by requiring destructuring to be done inside the component body rather than in the parameter list. This promotes better code readability and makes prop usage more explicit.
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+const Component = ({ children }) => <div>{children}</div>;
+
+const Component = ({ title, children, onClick }) => (
+  <div onClick={onClick}>
+    <h1>{title}</h1>
+    {children}
+  </div>
+);
+
+function Component({ children }) {
+  return <div>{children}</div>;
+}
+
+const Component = function ({ children }) {
+  return <div>{children}</div>;
+};
+
+// Also applies to conditional returns
+const Component = ({ show, children }) => {
+  return show ? <div>{children}</div> : null;
+};
+
+// And logical operators
+const Component = ({ show, children }) => {
+  return show && <div>{children}</div>;
+};
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+const Component = (props) => {
+  const { children } = props;
+  return <div>{children}</div>;
+};
+
+const Component = (props) => {
+  const { title, children, onClick } = props;
+
+  return (
+    <div onClick={onClick}>
+      <h1>{title}</h1>
+      {children}
+    </div>
+  );
+};
+
+function Component(props) {
+  const { children } = props;
+  return <div>{children}</div>;
+}
+
+const Component = function (props) {
+  const { children } = props;
+  return <div>{children}</div>;
+};
+
+// Multiple parameters are allowed
+const Component = (props, ref) => {
+  return <div>{props.children}</div>;
+};
+
+// No parameters is allowed
+const Component = () => {
+  return <div>Hello</div>;
+};
+
+// Already using props parameter (no destructuring) is allowed
+const Component = (props) => {
+  return <div>{props.children}</div>;
+};
+
+// Non-React functions are ignored
+const helper = ({ value }) => {
+  return value * 2;
+};
+
+const regularFunction = ({ data }) => {
+  return data.map((item) => item.id);
+};
+```
+
+## Why?
+
+### Benefits of destructuring inside component body
+
+1. **Explicit prop usage**: Makes it clear which props are being used within the component
+2. **Better readability**: Separates prop extraction from component signature
+3. **Easier refactoring**: Props can be easily modified without changing the function signature
+4. **Consistent patterns**: Promotes a uniform approach across the codebase
+5. **Better TypeScript integration**: Works better with prop type definitions
+
+## When Not To Use It
+
+This rule should not be used if you:
+
+- Prefer parameter destructuring for brevity
+- Are working on a codebase that already consistently uses parameter destructuring
+- Need to maintain compatibility with existing patterns
+
+## Rule Scope
+
+This rule only applies to:
+
+- Functions that return JSX elements or fragments
+- Functions with exactly one parameter that is object destructuring
+- Arrow functions, function expressions, and function declarations
+
+The rule ignores:
+
+- Non-React functions (functions that don't return JSX)
+- Functions with multiple parameters
+- Functions with no parameters
+- Functions already using a `props` parameter without destructuring
+
+## Configuration
+
+This rule is included in the following configurations:
+
+- `nextfriday/react`
+- `nextfriday/react/recommended`
+- `nextfriday/nextjs`
+- `nextfriday/nextjs/recommended`
+
+To enable this rule manually:
+
+```json
+{
+  "rules": {
+    "nextfriday/react-props-destructure": "error"
+  }
+}
+```
+
+## Compatibility
+
+- React functional components
+- Arrow functions with JSX
+- Function declarations with JSX
+- Function expressions with JSX
+- Conditional JSX returns
+- Logical operator JSX returns
+- JSX fragments
+
+## Version
+
+This rule was introduced in eslint-plugin-nextfriday v1.0.0.