Enable "react/recommended" lint ruleset and fix/suppress violations

Khan · Nov 30, 2024 · 3650ec0 · 3650ec0
1 parent e795534
commit 3650ec0
Show file tree

Hide file tree

Showing 12 changed files with 19 additions and 2 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -49,6 +49,7 @@ function banImportExtension(extension) {
 module.exports = {
     extends: [
         "@khanacademy",
+        "plugin:react/recommended",
         // This config includes rules from storybook to enforce story best
         // practices
         "plugin:storybook/recommended",
@@ -308,6 +309,10 @@ module.exports = {
         /**
          * react
          */
+        "react/no-string-refs": "off", // on in recommended, but #legacy-code
+        "react/no-find-dom-node": "off", // on in recommended, but #legacy-code
+        "react/display-name": "off", // on in recommended, but we have many components that don't have a displayName
+        "react/no-unescaped-entities": "off", // on in recommended, but #legacy-code
         // This rule results in false-positives when using some types of React
         // components (such as functional components or hooks). Since
         // TypeScript is already checking that components are only using props

diff --git a/packages/perseus-editor/src/__stories__/content-preview.stories.tsx b/packages/perseus-editor/src/__stories__/content-preview.stories.tsx
@@ -4,7 +4,7 @@ import {
 } from "@khanacademy/perseus";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {spacing} from "@khanacademy/wonder-blocks-tokens";
-import {useState} from "react";
+import * as React from "react";
 
 import {articleWithImages} from "../../../perseus/src/__testdata__/article-renderer.testdata";
 import {mockStrings} from "../../../perseus/src/strings";
@@ -18,7 +18,8 @@ import type {Meta, StoryObj} from "@storybook/react";
 import "../styles/perseus-editor.less";
 
 const PreviewWrapper = (props) => {
-    const [previewDevice, setPreviewDevice] = useState<DeviceType>("phone");
+    const [previewDevice, setPreviewDevice] =
+        React.useState<DeviceType>("phone");
 
     return (
         <View>

diff --git a/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx b/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx
@@ -1,4 +1,5 @@
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import * as React from "react";
 
 import DeviceFramer from "../device-framer";
 

diff --git a/packages/perseus-editor/src/widgets/definition-editor.tsx b/packages/perseus-editor/src/widgets/definition-editor.tsx
@@ -39,6 +39,7 @@ class DefinitionEditor extends React.Component<Props> {
                 <a
                     href="https://docs.google.com/document/d/1udaPef4imOfTMhmLDlWq4SM0mxL0r3YHFZE-5J1uGfo"
                     target="_blank"
+                    rel="noreferrer"
                 >
                     Definition style guide
                 </a>

diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx
@@ -370,6 +370,7 @@ class ExpressionEditor extends React.Component<Props, State> {
 
                 return (
                     <AnswerOption
+                        key={ans.key}
                         draggable={true}
                         considered={ans.considered}
                         expressionProps={expressionProps}
@@ -456,6 +457,7 @@ class ExpressionEditor extends React.Component<Props, State> {
                             <a
                                 href="https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels"
                                 target="_blank"
+                                rel="noreferrer"
                             >
                                 this article.
                             </a>

diff --git a/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx b/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx
@@ -277,6 +277,7 @@ const LockedEllipseSettings = (props: Props) => {
                     {labels?.map((label, labelIndex) => (
                         <LockedLabelSettings
                             {...label}
+                            key={labelIndex}
                             expanded={true}
                             // TODO(LEMS-2656): remove TS suppression
                             onChangeProps={

diff --git a/...rseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx b/...rseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-line-settings.tsx
@@ -299,6 +299,7 @@ const LockedLineSettings = (props: Props) => {
                     {labels?.map((label, labelIndex) => (
                         <LockedLabelSettings
                             {...label}
+                            key={labelIndex}
                             expanded={true}
                             // TODO(LEMS-2656): remove TS suppression
                             onChangeProps={

diff --git a/...seus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx b/...seus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-point-settings.tsx
@@ -270,6 +270,7 @@ const LockedPointSettings = (props: Props) => {
                     {labels?.map((label, labelIndex) => (
                         <LockedLabelSettings
                             {...label}
+                            key={labelIndex}
                             containerStyle={
                                 !isDefiningPoint &&
                                 styles.lockedPointLabelContainer

diff --git a/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx b/...us-editor/src/widgets/interactive-graph-editor/locked-figures/locked-polygon-settings.tsx
@@ -370,6 +370,7 @@ const LockedPolygonSettings = (props: Props) => {
                     {labels?.map((label, labelIndex) => (
                         <LockedLabelSettings
                             {...label}
+                            key={labelIndex}
                             expanded={true}
                             // TODO(LEMS-2656): remove TS suppression
                             onChangeProps={

diff --git a/...eus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx b/...eus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-vector-settings.tsx
@@ -236,6 +236,7 @@ const LockedVectorSettings = (props: Props) => {
                     {labels?.map((label, labelIndex) => (
                         <LockedLabelSettings
                             {...label}
+                            key={labelIndex}
                             expanded={true}
                             // TODO(LEMS-2656): remove TS suppression
                             onChangeProps={

diff --git a/packages/perseus-editor/src/widgets/radio/editor.tsx b/packages/perseus-editor/src/widgets/radio/editor.tsx
@@ -293,6 +293,7 @@ class RadioEditor extends React.Component<any> {
                             "https://docs.google.com/document/d/1frZf7yrWVWb1n4tVjqlzqVUiv1pn4cZXbxgP62-JDBY/edit#heading=h.8ng1isya19nu"
                         }
                         target="_blank"
+                        rel="noreferrer"
                     >
                         Multiple choice style guide
                     </a>

diff --git a/packages/perseus/src/util/tex.ts b/packages/perseus/src/util/tex.ts
@@ -64,6 +64,7 @@ export default {
             // that name is already taken.
             // eslint-disable-next-line import/no-deprecated
             reactRender(
+                // eslint-disable-next-line react/no-children-prop
                 React.createElement(TeX, {
                     children: text,
                     onRender: callback,