feat: update naming convention rules default excepts (#1216)

Signed-off-by: REL1CX <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: Rel1cx

apps/website/content/docs/rules/meta.json

@@ -78,7 +78,6 @@
     "dom-no-unsafe-target-blank",
     "dom-no-use-form-state",
     "dom-no-void-elements-with-children",
-    "dom-prefer-namespace-import",
     "---Web API Rules---",
     "web-api-no-leaked-event-listener",
     "web-api-no-leaked-interval",

packages/plugins/eslint-plugin-react-dom/src/rules/prefer-namespace-import.mdx

@@ -2,8 +2,6 @@
 title: no-direct-set-state-in-use-layout-effect
 ---
 
-<Callout type="warning">This rule is experimental and may change in the future or be removed. It is not recommended to use it in production code at this time.</Callout>
-
 **Full Name in `eslint-plugin-react-hooks-extra`**
 
 ```sh copy
@@ -20,12 +18,6 @@ react-hooks-extra/no-direct-set-state-in-use-layout-effect
 
 `🧪`
 
-**Presets**
-
-- `recommended`
-- `recommended-typescript`
-- `recommended-type-checked`
-
 ## Description
 
 Disallow **direct** calls to the [`set` function](https://react.dev/reference/react/useState#setstate) of `useState` in `useLayoutEffect`.
@@ -149,7 +141,11 @@ export default function RemoteContent() {
 }
 ```
 
-The following examples are derived from the [React documentation](https://react.dev/learn/you-might-not-need-an-effect):
+<Callout title="TIP">
+  If you need to fetch remote data within the component, consider using libraries like [TanStack Query](https://tanstack.com/query/v3/) or [SWR](https://swr.vercel.app/). They handle caching, re-fetching, and state management for you, making your code cleaner and more efficient.
+</Callout>
+
+The following examples are derived from the [React Docs: You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect):
 
 ### Failing
 

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.mdx

@@ -54,7 +54,7 @@ function MyComponent() {
 - `excepts`: (optional) An array of component names that are allowed to not follow the rule.
 - `allowAllCaps`: (optional) If `true`, allows all caps component names. Default is `false`.
 
-## Rule Options Examples
+## Configuration Examples
 
 ```json
 {

packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.mdx

@@ -15,16 +15,6 @@ type Options = readonly [
   | Case
   | {
     allowAllCaps?: boolean;
-    /**
-     * @todo Remove in the next major version
-     * @deprecated Component names now need to start with an uppercase letter instead of a non-lowercase letter. This means `_Button` or `_component` are no longer valid. (@kassens) in https://github.com/facebook/react/pull/25162
-     */
-    allowLeadingUnderscore?: boolean;
-    /**
-     * @todo Remove in the next major version
-     * @deprecated This option has no actual effect on the rule
-     */
-    allowNamespace?: boolean;
     excepts?: readonly string[];
     rule?: Case;
   },
@@ -50,16 +40,6 @@ const schema = [
         additionalProperties: false,
         properties: {
           allowAllCaps: { type: "boolean" },
-          /**
-           * @todo Remove in the next major version
-           * @deprecated
-           */
-          allowLeadingUnderscore: { type: "boolean" },
-          /**
-           * @todo Remove in the next major version
-           * @deprecated
-           */
-          allowNamespace: { type: "boolean" },
           excepts: {
             type: "array",
             items: { type: "string", format: "regex" },

packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.ts

@@ -34,7 +34,7 @@ This rule enforces consistent file extensions for JSX files.
 - `extensions`: List of file extensions that should be treated as JSX files. Default is `[".jsx", ".tsx"]`.
 - `ignoreFilesWithoutCode`: When set to `true`, this rule will ignore files that do not contain JSX syntax. Default is `true`.
 
-## Rule Options Examples
+## Configuration Examples
 
 ```js title="eslint.config.js"
 // ...

packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename-extension.mdx

@@ -20,106 +20,117 @@ react-naming-convention/filename
 
 ## Description
 
-Enforces consistent file naming conventions.
+This rule enforces consistent file naming conventions for React components, hooks, and other project files.
+
+By default, this rule enforces `PascalCase`, but it can be configured to support `camelCase`, `kebab-case`, or `snake_case` to match your project's standards.
 
 ## Examples
 
 ### Failing
 
-```bash title="Terminal" {3}
-npx eslint --rule '@eslint-react/naming-convention/filename: ["warn", { "rule": "PascalCase" }]' .
-
-src/components/component.tsx
-    1:1  error  "File name `component.tsx` does not match `PascalCase`. Should rename to `Component.tsx`  @eslint-react/naming-convention/filename
+If the rule is configured for `PascalCase`, the following filename will trigger a warning:
 
-✖ 1 problems (0 errors, 1 warnings)
+```js title="eslint.config.js"
+export default [
+  {
+    files: ["**/*.tsx"],
+    rules: {
+      "@eslint-react/naming-convention/filename": ["warn", { rule: "PascalCase" }],
+    },
+  },
+];
 ```
 
-```bash {3}
-npx eslint --rule '@eslint-react/naming-convention/filename: ["warn", { "rule": "kebab-case" }]' .
+```bash title="src/components/component.tsx"
+# File name "component.tsx" does not match PascalCase.
+```
 
-src/components/example_component.tsx
-    1:1  error  "File name `example_component.tsx` does not match `kebab-case`. Should rename to `example-component.tsx`  @eslint-react/naming-convention/filename
+```text title="ESLint Output"
+src/components/component.tsx
+  1:1  error  File name `component.tsx` does not match `PascalCase`. Should rename to `Component.tsx`  @eslint-react/naming-convention/filename
 
-✖ 1 problems (0 errors, 1 warnings)
+✖ 1 problem (1 error, 0 warnings)
 ```
 
 ### Passing
 
-```bash title="Terminal"
-npx eslint --rule '@eslint-react/naming-convention/filename: ["warn", { "rule": "PascalCase" }]' .
+With the same `PascalCase` configuration, this file name is valid:
 
-src/components/Component.tsx
-
-✨  Done in 0.61s.
+```bash title="src/components/Component.tsx"
+# Correctly named file.
 ```
 
-```bash title="Terminal"
-npx eslint --rule '@eslint-react/naming-convention/filename: ["warn", { "rule": "kebab-case" }]' .
+This file will pass without any warnings.
 
-src/components/example-component.tsx
+## Rule Options
 
-✨  Done in 0.61s.
-```
+The rule accepts an object with the following properties:
 
-## Rule Options
+- `rule`: The naming convention to enforce. Default: `"PascalCase"`.
+  - `"PascalCase"`: `ExampleComponent.tsx`
+  - `"camelCase"`: `exampleComponent.tsx`
+  - `"kebab-case"`: `example-component.tsx`
+  - `"snake_case"`: `example_component.tsx`
+- `excepts`: An array of strings or regex patterns to exclude certain file names from this rule. The default exceptions are designed to accommodate common patterns in modern web frameworks:
+  - `"index"`: Ignores `index` files (e.g., `index.ts`, `index.tsx`).
+  - `"/^_/"`: Ignores files starting with an underscore (e.g., `_app.tsx`, `_layout.tsx`).
+  - `"/^\\$/"`: Ignores files starting with a dollar sign (e.g., `$.tsx`).
+  - `"/^[0-9]+$/"`: Ignores files that are purely numeric (e.g., `404.tsx`).
+  - `"/^\[[^\]]+\]$/"`: Ignores files with dynamic route segments in brackets (e.g., `[slug].tsx`).
 
-- `rule`: The rule to apply to the file name. Default is `"PascalCase"`. Possible values:
-  1. `PascalCase`: PascalCase
-  2. `camelCase`: camelCase
-  3. `kebab-case`: kebab-case
-  4. `snake_case`: snake\_case
+## Configuration Examples
 
-## Rule Options Examples
+### Enforcing `kebab-case`
 
 ```js title="eslint.config.js"
-// ...
 export default [
-  // ...
   {
     files: ["**/*.tsx"],
     rules: {
-      "@eslint-react/naming-convention/filename": ["warn", "PascalCase"]
-  }
+      "@eslint-react/naming-convention/filename": ["warn", { rule: "kebab-case" }],
+    },
+  },
 ];
 ```
 
+### Different Rules for Different Files
+
+You can apply different conventions to different parts of your project. For example, use `PascalCase` for components and `camelCase` for hooks.
+
 ```js title="eslint.config.js"
-// ...
 export default [
-  // ...
   {
-    files: ["**/*.tsx"],
+    files: ["src/components/**/*.{ts,tsx}"],
+    rules: {
+      "@eslint-react/naming-convention/filename": ["warn", { rule: "PascalCase" }],
+    },
+  },
+  {
+    files: ["src/hooks/**/use*.{ts,tsx}"],
     rules: {
-      "@eslint-react/naming-convention/filename": ["warn", { "rule": "kebab-case" }]
-  }
+      "@eslint-react/naming-convention/filename": ["warn", { rule: "camelCase" }],
+    },
+  },
 ];
 ```
 
-### Applying different rules to different files
+### Disabling the Rule for Specific Directories
+
+Framework-specific directories like Next.js's `app` router often have their own naming conventions. You can disable the rule for these directories.
 
 ```js title="eslint.config.js"
-// ...
 export default [
-  // ...
   {
-    files: ["src/**/*.{ts,tsx}"],
-    ignore: ["**/index.{ts,tsx}"],
+    files: ["**/*.{ts,tsx}"],
     rules: {
-      "@eslint-react/naming-convention/filename": ["warn", "PascalCase"],
+      "@eslint-react/naming-convention/filename": ["warn", { rule: "kebab-case" }],
     },
   },
   {
-    files: ["src/pages/**/*.{ts,tsx}"],
-    ignore: ["**/index.{ts,tsx}"],
+    // Opt-out for files in the 'app' directory
+    files: ["app/**/*.{ts,tsx}"],
     rules: {
-      "@eslint-react/naming-convention/filename": ["warn", "kebab-case"],
-    },
-  },
-  {
-    files: ["src/hooks/**/use*.{ts,tsx}"],
-    rules: {
-      "@eslint-react/naming-convention/filename": ["warn", "camelCase"],
+      "@eslint-react/naming-convention/filename": "off",
     },
   },
 ];
@@ -129,10 +140,3 @@ export default [
 
 - [Rule source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename.ts)
 - [Test source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename.spec.ts)
-
----
-
-## See Also
-
-- [`filename-extension`](./filename-extension):
-  Enforces consistent use of the JSX file extension.

packages/plugins/eslint-plugin-react-naming-convention/src/rules/filename.mdx

@@ -110,6 +110,21 @@ ruleTester.run(RULE_NAME, rule, {
       filename: "snake_case.tsx",
       options: [{ rule: "camelCase" }],
     },
+    {
+      code,
+      errors: [
+        {
+          messageId: "filenameInvalid",
+          data: {
+            name: "snake_case.test.tsx",
+            rule: "camelCase",
+            suggestion: "snakeCase.test.tsx",
+          },
+        },
+      ],
+      filename: "snake_case.test.tsx",
+      options: [{ rule: "camelCase" }],
+    },
   ],
   valid: [
     {
@@ -151,5 +166,35 @@ ruleTester.run(RULE_NAME, rule, {
       filename: "snake_case.tsx",
       options: [{ rule: "snake_case" }],
     },
+    {
+      code,
+      filename: "snake_case.test.tsx",
+      options: [{ rule: "snake_case" }],
+    },
+    {
+      code,
+      filename: "404.tsx",
+      options: [{ rule: "PascalCase" }],
+    },
+    {
+      code,
+      filename: "$.tsx",
+      options: [{ rule: "PascalCase" }],
+    },
+    {
+      code,
+      filename: "$id.tsx",
+      options: [{ rule: "PascalCase" }],
+    },
+    {
+      code,
+      filename: "_app.tsx",
+      options: [{ rule: "PascalCase" }],
+    },
+    {
+      code,
+      filename: "[slug].tsx",
+      options: [{ rule: "PascalCase" }],
+    },
   ],
 });