fix: seperate the type aware rules for react (#622)

* feat: add breaking test with react and typescript

* fix: seperate config for type aware rules react

* refactor: remove the parser from the typeaware rules since ts config takes care of it

Author: PranavSK

fixtures/output/ts-strict-with-react/javascript.js

@@ -0,0 +1,73 @@
+// This file is generated by ChatGPT
+
+// eslint-disable-next-line no-console
+const log = console.log
+
+// Define a class using ES6 class syntax
+class Person {
+  constructor(name, age) {
+    this.name = name
+    this.age = age
+  }
+
+  // Define a method within the class
+  sayHello() {
+    log(`Hello, my name is ${this.name} and I am ${this.age} years old.`)
+  }
+}
+
+// Create an array of objects
+const people = [
+  new Person('Alice', 30),
+  new Person('Bob', 25),
+  new Person('Charlie', 35),
+]
+
+// Use the forEach method to iterate over the array
+people.forEach((person) => {
+  person.sayHello()
+})
+
+// Use a template literal to create a multiline string
+const multilineString = `
+  This is a multiline string
+  that spans multiple lines.
+`
+
+// Use destructuring assignment to extract values from an object
+const { name, age } = people[0]
+log(`First person in the array is ${name} and they are ${age} years old.`, multilineString)
+
+// Use the spread operator to create a new array
+const numbers = [1, 2, 3]
+const newNumbers = [...numbers, 4, 5]
+log(newNumbers)
+
+// Use a try-catch block for error handling
+try {
+  // Attempt to parse an invalid JSON string
+  JSON.parse('invalid JSON')
+}
+catch (error) {
+  console.error('Error parsing JSON:', error.message)
+}
+
+// Use a ternary conditional operator
+const isEven = num => num % 2 === 0
+const number = 7
+log(`${number} is ${isEven(number) ? 'even' : 'odd'}.`)
+
+// Use a callback function with setTimeout for asynchronous code
+setTimeout(() => {
+  log('This code runs after a delay of 2 seconds.')
+}, 2000)
+
+let a, b, c, d, foo
+
+if (a
+  || b
+  || c || d
+  || (d && b)
+) {
+  foo()
+}

fixtures/output/ts-strict-with-react/jsx.jsx

@@ -0,0 +1,29 @@
+export function HelloWorld({
+  greeting = 'hello',
+  greeted = '"World"',
+  silent = false,
+  onMouseOver,
+}) {
+  if (!greeting) {
+    return null
+  };
+
+  // TODO: Don't use random in render
+  const num = Math
+    .floor (Math.random() * 1e+7)
+    .toString()
+    .replace(/\.\d+/g, '')
+
+  return (
+    <div className="HelloWorld" title={`You are visitor number ${num}`} onMouseOver={onMouseOver}>
+      <strong>{ greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
+      {greeting.endsWith(',')
+        ? ' '
+        : <span style={{ color: '\grey' }}>", "</span> }
+      <em>
+        { greeted }
+      </em>
+      { (silent) ? '.' : '!'}
+    </div>
+  )
+}

fixtures/output/ts-strict-with-react/markdown.md

@@ -0,0 +1,34 @@
+Header
+======
+
+_Look,_ code blocks are formatted *too!*
+
+```js
+// This should be handled by ESLint instead of Prettier
+function identity(x) {
+  if (foo) {
+    console.log('bar')
+  }
+}
+```
+
+```css
+/* This should be handled by Prettier */
+.foo { color:red;}
+```
+
+Pilot|Airport|Hours
+--|:--:|--:
+John Doe|SKG|1338
+Jane Roe|JFK|314
+
+- - - - - - - - - - - - - - -
+
++ List
+ + with a [link] (/to/somewhere)
++ and [another one]
+
+  [another one]:  http://example.com 'Example title'
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Curabitur consectetur maximus risus, sed maximus tellus tincidunt et.

fixtures/output/ts-strict-with-react/toml.toml

@@ -0,0 +1,23 @@
+comma = [
+  1,
+  2,
+  3,
+]
+
+[foo]
+b = 1
+c = "hello"
+a = { answer = 42 }
+indent = [
+  1,
+  2
+]
+
+[a-table]
+apple.type = "fruit"
+apple.skin = "thin"
+apple.color = "red"
+
+orange.type = "fruit"
+orange.skin = "thick"
+orange.color = "orange"

fixtures/output/ts-strict-with-react/tsx.tsx

@@ -0,0 +1,32 @@
+export function Component1() {
+  return <div />
+}
+
+export function jsx2() {
+  const props = { a: 1, b: 2 }
+  return (
+    <a foo="bar" bar="foo">
+      <div
+        {...props}
+        a={1}
+        b="2"
+      >
+        Inline Text
+      </div>
+      <Component1>
+        Block Text
+      </Component1>
+      <div>
+        Mixed
+        <div>Foo</div>
+        Text
+        <b> Bar</b>
+      </div>
+      <p>
+        foo
+        <i>bar</i>
+        <b>baz</b>
+      </p>
+    </a>
+  )
+}

fixtures/output/ts-strict-with-react/typescript.ts

@@ -0,0 +1,84 @@
+// Define a TypeScript interface
+interface Person {
+  name: string
+  age: number
+}
+
+// Create an array of objects with the defined interface
+const people: Person[] = [
+  { name: 'Alice', age: 30 },
+  { name: 'Bob', age: 25 },
+  { name: 'Charlie', age: 35 },
+]
+
+// eslint-disable-next-line no-console
+const log = console.log
+
+// Use a for...of loop to iterate over the array
+for (const person of people) {
+  log(`Hello, my name is ${person.name} and I am ${person.age} years old.`)
+}
+
+// Define a generic function
+function identity< T >(arg: T): T {
+  return arg
+}
+
+// Use the generic function with type inference
+const result = identity(
+  'TypeScript is awesome',
+)
+log(result)
+
+// Use optional properties in an interface
+interface Car {
+  make: string
+  model?: string
+}
+
+// Create objects using the interface
+const car1: Car = { make: 'Toyota' }
+const car2: Car = {
+  make: 'Ford',
+  model: 'Focus',
+}
+
+// Use union types
+type Fruit = 'apple' | 'banana' | 'orange'
+const favoriteFruit: Fruit = 'apple'
+
+// Use a type assertion to tell TypeScript about the type
+const inputValue: any = '42'
+const numericValue = inputValue as number
+
+// Define a class with access modifiers
+class Animal {
+  private name: string
+  constructor(name: string) {
+    this.name = name
+  }
+
+  protected makeSound(sound: string) {
+    log(`${this.name} says ${sound}`)
+  }
+}
+
+// Extend a class
+class Dog extends Animal {
+  constructor(private alias: string) {
+    super(alias)
+  }
+
+  bark() {
+    this.makeSound('Woof!')
+  }
+}
+
+const dog = new Dog('Buddy')
+dog.bark()
+
+function fn(): string {
+  return `hello${1}`
+}
+
+log(car1, car2, favoriteFruit, numericValue, fn())

fixtures/output/ts-strict-with-react/vue-ts.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Define reactive data and props
+import { ref } from 'vue'
+
+const greeting = ref('Hello, Vue 3!')
+const counter = ref<number | 1>(0)
+
+// Define a function
+function incrementCounter() {
+  counter.value++
+}
+</script>
+
+<template>
+  <div>
+    <h1>{{ greeting }}</h1>
+    <button @click="incrementCounter">
+      Click me!
+    </button>
+    <p>Counter: {{ counter }}</p>
+  </div>
+</template>
+
+<style>
+.a {  color:   red }
+</style>
+
+<style lang="scss">
+$font-stack: Helvetica, sans-serif;
+$primary-color:   #333;
+
+body { font: 100% $font-stack;
+  color: $primary-color;
+}
+</style>

fixtures/output/ts-strict-with-react/vue.vue

@@ -0,0 +1,27 @@
+<script setup>
+// Define reactive data and props
+import { ref } from 'vue'
+
+const greeting = ref(`Hello, Vue 3!${1}`)
+const counter = ref(0)
+const doubled = computed(() => counter.value * 2)
+
+// Define a function
+function incrementCounter() {
+  counter.value++
+}
+
+const _zero = doubled.value + counter.value
+</script>
+
+<template>
+  <div>
+    <h1>
+      {{ greeting }}
+    </h1>
+    <button @click="incrementCounter">
+      Click me!
+    </button>
+    <p>Counter: {{ counter }}</p>
+  </div>
+</template>