docs: improve examples in rules docs (#1020)

Author: Rel1cx

packages/core/docs/functions/isDeclaredInRenderPropLoose.md

@@ -9,7 +9,7 @@
 > **isDeclaredInRenderPropLoose**(`node`): `boolean`
 
 Unsafe check whether given node is declared inside a render prop
-```jsx
+```tsx
 _ = <Component renderRow={"node"} />
 `                         ^^^^^^   `
 _ = <Component rows={ [{ render: "node" }] } />

packages/core/docs/functions/isInsideRenderMethod.md

@@ -9,7 +9,7 @@
 > **isInsideRenderMethod**(`node`): `boolean`
 
 Check whether given node is declared inside class component's render block
-```jsx
+```tsx
 class Component extends React.Component {
   render() {
     class NestedClassComponent extends React.Component {

packages/core/docs/functions/isRenderFunctionLoose.md

@@ -9,7 +9,7 @@
 > **isRenderFunctionLoose**(`context`, `node`): `boolean`
 
 Unsafe check whether given node is a render function
-```jsx
+```tsx
 const renderRow = () => <div />
 `                 ^^^^^^^^^^^^`
 _ = <Component renderRow={() => <div />} />

packages/core/docs/functions/isRenderPropLoose.md

@@ -9,7 +9,7 @@
 > **isRenderPropLoose**(`context`, `node`): `boolean`
 
 Unsafe check whether given JSXAttribute is a render prop
-```jsx
+```tsx
 _ = <Component renderRow={() => <div />} />
 `              ^^^^^^^^^^^^^^^^^^^^^^^^^  `
 ```

packages/core/src/component/component-lifecycle.ts

@@ -66,7 +66,7 @@ export function isFunctionOfRenderMethod(node: AST.TSESTreeFunction) {
 
 /**
  * Check whether given node is declared inside class component's render block
- * ```jsx
+ * ```tsx
  * class Component extends React.Component {
  *   render() {
  *     class NestedClassComponent extends React.Component {

packages/core/src/component/component-render-prop.ts

@@ -6,7 +6,7 @@ import { AST_NODE_TYPES as T } from "@typescript-eslint/types";
 
 /**
  * Unsafe check whether given node is a render function
- * ```jsx
+ * ```tsx
  * const renderRow = () => <div />
  * `                 ^^^^^^^^^^^^`
  * _ = <Component renderRow={() => <div />} />
@@ -39,7 +39,7 @@ export function isRenderFunctionLoose(context: RuleContext, node: AST.TSESTreeFu
 
 /**
  * Unsafe check whether given JSXAttribute is a render prop
- * ```jsx
+ * ```tsx
  * _ = <Component renderRow={() => <div />} />
  * `              ^^^^^^^^^^^^^^^^^^^^^^^^^  `
  * ```
@@ -59,7 +59,7 @@ export function isRenderPropLoose(context: RuleContext, node: TSESTree.JSXAttrib
 
 /**
  * Unsafe check whether given node is declared directly inside a render property
- * ```jsx
+ * ```tsx
  * const rows = { render: () => <div /> }
  * `                      ^^^^^^^^^^^^^ `
  * _ = <Component rows={ [{ render: () => <div /> }] } />
@@ -80,7 +80,7 @@ export function isDirectValueOfRenderPropertyLoose(node: TSESTree.Node) {
 
 /**
  * Unsafe check whether given node is declared inside a render prop
- * ```jsx
+ * ```tsx
  * _ = <Component renderRow={"node"} />
  * `                         ^^^^^^   `
  * _ = <Component rows={ [{ render: "node" }] } />

packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.md

@@ -29,23 +29,19 @@ A **safe** auto-fix is available for this rule.
 ### Failing
 
 ```tsx
-import React from "react";
-
-function MyComponent() {
-  return <button disabled />;
-  //             ^^^^^^^^
-  //             - Avoid using shorthand syntax for 'disabled' attribute.
-}
+const Input = <input type="checkbox" checked />;
+//                                   ^^^^^^^
+//                                   - Expected `checked={true}` instead of `checked`
+const button = <button disabled />;
+//                     ^^^^^^^^
+//                     - Expected `disabled={true}` instead of `disabled`
 ```
 
 ### Passing
 
 ```tsx
-import React from "react";
-
-function MyComponent() {
-  return <button disabled={true} />;
-}
+const Input = <input type="checkbox" checked={true} />;
+const button = <button disabled={true} />;
 ```
 
 ## Implementation

packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.md

@@ -25,7 +25,7 @@ Enforces explicit `<Fragment>` components instead of the shorthand `<>` or `</>`
 ```tsx
 import React from "react";
 
-function MyComponent() {
+export function MyComponent() {
   return (
     <>
       <button />
@@ -40,7 +40,7 @@ function MyComponent() {
 ```tsx
 import React, { Fragment } from "react";
 
-function MyComponent() {
+export function MyComponent() {
   return (
     <Fragment>
       <button />

packages/plugins/eslint-plugin-react-x/src/rules/jsx-no-undef.md

@@ -22,40 +22,21 @@ This rule is used to prevent the use of undefined variables in JSX. It checks fo
 
 ### Failing
 
-```jsx
-const MyComponent = () => {
-  return (
-    <div>
-      <Foo />
-    </div>
-  );
-};
+```tsx
+import React from "react";
+
+const button = <MyButton />;
+//              ^^^^^^^^
+//              - 'MyButton' is not defined
 ```
 
 ### Passing
 
-```jsx
-import Foo from "./Foo";
-
-const MyComponent = () => {
-  return (
-    <div>
-      <Foo />
-    </div>
-  );
-};
-```
-
-```jsx
-const Foo = () => <div>Foo</div>;
+```tsx
+import React from "react";
+import MyButton from "./MyButton";
 
-const MyComponent = () => {
-  return (
-    <div>
-      <Foo />
-    </div>
-  );
-};
+const button = <MyButton />;
 ```
 
 ## Implementation

packages/plugins/eslint-plugin-react-x/src/rules/jsx-uses-vars.md

@@ -31,13 +31,13 @@ This rule only has an effect when the `no-unused-vars` rule is enabled.
 ### Failing
 
 ```tsx
-const Hello = require("./Hello");
+import Hello from "./Hello";
 ```
 
 ### Passing
 
 ```tsx
-const Hello = require("./Hello");
+import Hello from "./Hello";
 
 <Hello name="John" />;
 ```