diff --git a/.eslintrc.js b/.eslintrc.js index c7cadf436c..6ce8142e47 100644 --- 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 index f70cacb820..fb49799222 100644 --- 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("phone"); + const [previewDevice, setPreviewDevice] = + React.useState("phone"); return ( diff --git a/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx b/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx index a6f9f06cfc..ba388c4243 100644 --- 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 index 263e3f20f8..ca6efeeab0 100644 --- 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 { Definition style guide diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx index d5d7723170..6d902cc5bc 100644 --- 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 { return ( { this article. diff --git a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx index 77b6e410ad..70be387e5f 100644 --- a/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx +++ b/packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings.tsx @@ -277,6 +277,7 @@ const LockedEllipseSettings = (props: Props) => { {labels?.map((label, labelIndex) => ( { {labels?.map((label, labelIndex) => ( { {labels?.map((label, labelIndex) => ( { {labels?.map((label, labelIndex) => ( { {labels?.map((label, labelIndex) => ( { "https://docs.google.com/document/d/1frZf7yrWVWb1n4tVjqlzqVUiv1pn4cZXbxgP62-JDBY/edit#heading=h.8ng1isya19nu" } target="_blank" + rel="noreferrer" > Multiple choice style guide diff --git a/packages/perseus/src/util/tex.ts b/packages/perseus/src/util/tex.ts index 1a2c23bd65..ec33eb544a 100644 --- 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,