diff --git a/.changeset/calm-chefs-boil.md b/.changeset/calm-chefs-boil.md new file mode 100644 index 0000000000..c0cf18f8f4 --- /dev/null +++ b/.changeset/calm-chefs-boil.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +TypeScript fixes diff --git a/.changeset/large-melons-deny.md b/.changeset/large-melons-deny.md new file mode 100644 index 0000000000..d32d110c9e --- /dev/null +++ b/.changeset/large-melons-deny.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus-editor": patch +--- + +Ensure links opening to style guide (Google Docs) set `rel="noreferrer"` diff --git a/.eslintrc.js b/.eslintrc.js index c7cadf436c..f8ebfe48d2 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,9 @@ module.exports = { /** * react */ + "react/no-string-refs": "off", // on in react/recommended, but we have #legacy-code + "react/no-find-dom-node": "off", // on in react/recommended, but we have #legacy-code + "react/display-name": "off", // on in react/recommended, but doesn't seem that useful to fix // 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..f830e579a0 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"; @@ -24,8 +25,8 @@ const SampleContent = () => { }} > The DeviceFramer controls the size of the content inside the frame. - So there's not much to look at here except how large each device - type's size is. + So there's not much to look at here except how large each + device type's size is. ); }; diff --git a/packages/perseus-editor/src/components/graph-settings.tsx b/packages/perseus-editor/src/components/graph-settings.tsx index f4bf18003c..c7ceda7499 100644 --- a/packages/perseus-editor/src/components/graph-settings.tsx +++ b/packages/perseus-editor/src/components/graph-settings.tsx @@ -561,8 +561,9 @@ const GraphSettings = createReactClass({ />

- Create an image in graphie, or use the "Add - image" function to create a background. + Create an image in graphie, or use the + "Add image" function to create a + background.

diff --git a/packages/perseus-editor/src/tex-error-view.tsx b/packages/perseus-editor/src/tex-error-view.tsx index d46d101534..17638e8377 100644 --- a/packages/perseus-editor/src/tex-error-view.tsx +++ b/packages/perseus-editor/src/tex-error-view.tsx @@ -36,9 +36,9 @@ class TexErrorView extends React.Component { {showErrors && ( - If your math doesn't display correctly, these errors - might help you troubleshoot. Message #content-kitchen - for help. + If your math doesn't display correctly, these + errors might help you troubleshoot. Message + #content-kitchen for help. )} {showErrors && diff --git a/packages/perseus-editor/src/widgets/__stories__/image-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/image-editor.stories.tsx index df28b2d6f4..4196b36930 100644 --- a/packages/perseus-editor/src/widgets/__stories__/image-editor.stories.tsx +++ b/packages/perseus-editor/src/widgets/__stories__/image-editor.stories.tsx @@ -46,9 +46,9 @@ const WithState = () => { style={{fontStyle: "italic", marginBottom: spacing.small_12}} > Note that this editor has a known-issue where it does not - calculate the image dimensions initially if they aren't - provided. It does update the dimensions when you blur the 'Image - url:' field. + calculate the image dimensions initially if they aren't + provided. It does update the dimensions when you blur the + 'Image url:' field. { }} /> - If you show the editor, you should use the "full-width" - alignment to make room for the width of the editor. + If you show the editor, you should use the + "full-width" alignment to make room for the width + of the editor.
{ Definition style guide diff --git a/packages/perseus-editor/src/widgets/dropdown-editor.tsx b/packages/perseus-editor/src/widgets/dropdown-editor.tsx index 6ad21df9cf..7997f866d9 100644 --- a/packages/perseus-editor/src/widgets/dropdown-editor.tsx +++ b/packages/perseus-editor/src/widgets/dropdown-editor.tsx @@ -117,8 +117,8 @@ class DropdownEditor extends React.Component { The drop down is useful for making inequalities in a custom format. We normally use the symbols {"<"},{" "} {">"}, ≤, ≥ (in that order) which you can copy into - the choices. When possible, use the "multiple - choice" answer type instead. + the choices. When possible, use the "multiple + choice" answer type instead.

@@ -145,18 +145,19 @@ class DropdownEditor extends React.Component {

- Label text that's read by screen readers. Highly - recommend adding a label here to ensure your + Label text that's read by screen readers. + Highly recommend adding a label here to ensure your exercise is accessible. For more information on writing accessible labels, please see{" "} this article. {" "} - If left blank, the value will default to "Select an - answer". + If left blank, the value will default to + "Select an answer".

diff --git a/packages/perseus-editor/src/widgets/expression-editor.tsx b/packages/perseus-editor/src/widgets/expression-editor.tsx index d5d7723170..08fc5a3c60 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 ( { />

- Label text that's read by screen readers. Highly - recommend adding a label here to ensure your + Label text that's read by screen readers. + Highly recommend adding a label here to ensure your exercise is accessible. For more information on writting accessible labels, please see{" "} this article. @@ -473,7 +475,8 @@ class ExpressionEditor extends React.Component {

Single-letter variables listed here will be interpreted as functions. This let us know that f(x) - means "f of x" and not "f times x". + means "f of x" and not "f times + x".

@@ -588,7 +591,7 @@ class AnswerOption extends React.Component< onClick={this.handleImSure} color="destructive" > - I'm sure! + I'm sure!